React 过滤状态而不破坏它

IT技术 reactjs react-jsx
2021-05-01 04:31:27

我正在尝试制作一个搜索功能，该功能会呈现在搜索文本输入中匹配的人员姓名。

问题是我将状态设置为与搜索匹配的项目，然后初始状态丢失，因此无法再进行搜索，因为状态将为空。那么我如何每次“填充”状态？

或者也许还有其他一些方法没有实际设置我不知道的状态。

我试图通过在过滤器之前调用 handleSearch 函数时尝试重置为初始状态来解决此问题，但这不起作用。

import React from 'react';
import Header from './Header';
import peopleData from '../persons.json';

class App extends React.Component {
  constructor(){
    super();
    this.handleSearch = this.handleSearch.bind(this);
    this.state = {
      people: peopleData
    }
  }

  handleSearch(wordToMatch){
    this.setState({ people: peopleData }); //Attempt to reset to initial state
    const result = this.state.people.filter(d => {
      const regex = new RegExp(wordToMatch, 'gi');
      return d.Name.match(regex);
    });
    this.setState({ people: result })
  }

  render() {
    const list = this.state.people.map((d, i) => <li key={i}>{d.Name}</li>);
    return (
      <div className="myApp">
        <Header
          tagline={"testing"}
          handleSearch={this.handleSearch}
        />
        <ul className="contentBody">
          {list}
        </ul>
      </div>
    )
  }
}

export default App;

带有搜索输入的组件：

import React from 'react';

class Header extends React.Component {
  render() {
    return (
      <header>
        <input
          type="text"
          placeholder={this.props.tagline}
          ref={(input) => this.searchInput = input}
          onChange={() => this.props.handleSearch(this.searchInput.value)}
        >
        </input>
      </header>
    )
  }
}

export default Header;

我的数据看起来如何

[
  {
    "Name": "Adam",
    "Born": 1971
  },

  {
    "Name": "Bob",
    "Born": 1999
  },
etc etc for 20 more names
2个回答

setState 函数不会立即更新状态对象。因此，当您引用时this.state.people，它将引用setState调用之前的状态。您可以将代码更新为：

handleSearch(wordToMatch) {
    const result = peopleData.filter(d => {
        const regex = new RegExp(wordToMatch, 'gi');
        return d.Name.match(regex);
    });
    this.setState({
        people: result
    })
}

在handleSearch设置searchString变量的状态。然后在render 方法中，不是简单地映射状态，而是首先过滤人员列表，该结果就是您所映射的。

改变：

const list = this.state.people.map((d, i) => <li key={i}>{d.Name}</li>);

进入这个：

const list = this.state.people.filter(d => {
  const regex = new RegExp(this.state.searchString, 'gi');
  return d.Name.match(regex);
}).map((d, i) => <li key={i}>{d.Name}</li>);

这样，状态中的列表保持不变，您可以在渲染时进行过滤。

其它你可能感兴趣的问题
上一篇react-konva dragBound 一个可缩放的舞台 下一篇在react中将索引从函数传递到函数