如何在ReactJS类组件中恢复以前的状态

Question

我在实施一个项目

• I有一个44对象数据数组

当我键入onChange()时，

• 会立即返回37数据。

类型后的20返回

• Problem是当我通过backspace返回到a时。保持在20。我怎样才能再次得到37数据。

Root.jsx的

• 代码

import React, { Component } from 'react'
import icons from './services/icons'
import IconCard from './components/IconCard'
import Header from './components/Header'
import Search from './components/Search'


const icon = new icons()

class Root extends Component {

    state = {
        data: icon.getIcon(),
    }

    getBadge = (e) => {
        console.log(e)
        const searched = this.state.data.filter(
            item => {
                if (e === '') {
                    return item
                } else if (item.title.toLowerCase().includes(e.toLowerCase())) {
                    console.log(item)
                    return item
                }
            }
        )
        this.setState({ data:searched })
    }
    

    render() {
        const data = this.state.data

        return (
            <>
                <>
                    <Header />
                    <Search getBadge={this.getBadge} />
                </>
                <div className='container'>
                    <IconCard data={data} />
                </div>
            </>
        )
    }
}

export default Root

• 状态数据类似于

state={
 data:data
}

• data

{
    "title": "Academia",
    "hex": "41454A"
},
{
    "title": "Academia",
    "hex": "41454A"
}

Search.jsx的

• 代码

import React, { Component } from 'react';

class Search extends Component {

    handleChange = (e) => {
        this.props.getBadge(e.target.value)
    }

    render() {
        // console.log(this.state.search)
        return (
            <div className='container pb-3'>
                <div className="row">
                    <div className="col-md-3  align-self-center ">
                        <input type="text" className="form-control" placeholder="Search by brand..." onChange={this.handleChange} />
                    </div>
                 </div>
            </div>
        )
    }
}

export default Search;

Answer 1

我理解你的问题。每当搜索文本发生变化时，您就会对原始数据进行变异。实际上，你不应该那样做。

相反，

import React, { Component } from 'react'
import icons from './services/icons'
import IconCard from './components/IconCard'
import Header from './components/Header'
import Search from './components/Search'


const icon = new icons()

class Root extends Component {

    state = {
        data: icon.getIcon(),
        searchText: '',
    }

    getBadge = (search) => {
       console.log(search)
       return this.state.data.filter(
            item => {
              if (item.title.toLowerCase().includes(search.toLowerCase())) {
                    console.log(item)
                    return true;
              }
              return false;
            }
        )
    }
    

    render() {
        const data = this.state.data

        return (
            <>
                <>
                    <Header />
                    <Search 
                        value={this.state.searchText} 
                        onChange={(value) => this.setState({searchText: value})} />
                </>
                <div className='container'>
                    <IconCard data={this.getBatchData(this.state.searchText)} />
                </div>
            </>
        )
    }
}

export default Root

component

• Change中的
• 设置searchText状态-- <Search />的道具--当搜索更新
• 时，按照code.
• Everytime更新搜索文本，数据将保持不变，但是过滤器将根据搜索文本

返回结果。

Answer 2

在您的函数getBadge中：

const searched = this.state.data.filter(...)
this.setState({ data:searched })

您正在用找到的对象替换状态。因此，如果数据对象有44个元素，经过搜索，它将只具有过滤的元素。所有其他元素都消失了。

您应该考虑从常量对象(而不是state.data )进行过滤。