ReactJS无法使搜索过滤器（文本）正常工作

Posted 2021-04-18

我正在尝试开发一些信息的非常简单的仪表板。我正在尝试在代码中添加搜索过滤器，以便按名称缩小数据范围。在许多其他教程中，我发现它们是常用的name.toLowerCase().indexOf(this.state.filterName.toLowerCase()) >= 0，但我只是没有为我工作，想向大家寻求指导。

您还可以提供有关我的代码一般结构的反馈！

Tables.js

class Table extends Component {
  constructor(props){
    super(props);

    this.state = {
      filterName: this.props.filterName,
      toShow: 'all',
      myArrays: [
        { 'id': 1, 'name': 'Eric', 'email': '[e-mail]', 'role': 'student', 'isadmin': 'false' },
        { 'id': 2, 'name': 'Amanda', 'email': '[e-mail]', 'role': 'student', 'isadmin': 'false' },
        { 'id': 3, 'name': 'Brenda', 'email': '[e-mail]', 'role': 'staff', 'isadmin': 'true' },
        { 'id': 4, 'name': 'Charles', 'email': '[e-mail]', 'role': 'teacher', 'isadmin': 'true' },
        { 'id': 5, 'name': 'Daimon', 'email': '[e-mail]', 'role': 'assistant', 'isadmin': 'false' }
      ]
    };
    this.toShowAdmin = this.toShowAdmin.bind(this);
  }

  toShowAdmin(){
    if (this.state.toShow === 'all'){
      this.setState({ toShow: 'admin' }, () => console.log(this.state.toShow ))
    } else {
      this.setState({ toShow: 'all' }, () => console.log(this.state.toShow ))
    }
  }

  render(){
    let myArrays = []

    if (this.state.toShow === 'all'){
      myArrays = this.state.myArrays;
    } else if (this.state.toShow === 'admin'){
      myArrays = this.state.myArrays.filter(row => row.isadmin === 'true')
    }

    myArrays = this.state.myArrays.filter(row => {
      return row.name.toLowerCase().indexOf(this.state.filterName.toLowerCase()) >= 0;
    });

    return(
      <div>
        <table className="table">
          <thead className="thead-dark">
            <tr>
              <th scope="col"> name </th>
              <th scope="col"> email </th>
              <th scope="col"> role </th>
              <th scope="col"> isadmin </th>
            </tr>
          </thead>

          <tbody>
            {myArrays.map(row=>
              <tr key={row.id}>
                <td> {row.name} </td>
                <td> {row.email} </td>
                <td> {row.role} </td>
                <td> {row.isadmin} </td>
              </tr>
            )}
          </tbody>
        </table>

        <button type='button' className='btn btn-primary' onClick={this.toShowAdmin}> Admins </button>
        { this.state.filterName }
      </div>
    );
  }
}

export default Table;

Main.js

class Main extends Component {
  constructor(props){
    super(props);

    this.state = {
      filterName: ''
    };
    this.filterUpdate = this.filterUpdate.bind(this);
  }

  filterUpdate(value){
    this.setState({ filterName: value}, () => console.log(this.state.filterName))
  }

  render(){
    return(
      <div>
        <Search
          filterName={this.state.filterName}
          filterUpdate={this.filterUpdate}/>
        <Tables
          filterName={this.state.filterName}/>
      </div>
    );
  }
}

export default Main;

答案

您应该像这样直接使用this.props.filterName：

    myArrays = this.state.myArrays.filter(row => {
      return row.name.toLowerCase().indexOf(this.props.filterName.toLowerCase()) >= 0;
    });

另一答案

一旦加载了子组件，您就必须使用componentWillReceiveProps来使用父道具更新子状态。在子组件中添加类似的内容-

componentWillReceiveProps(){
 this.setState({filterName: this.props.filterName})
}

See this Stack Over Flow Answer

否则，如果您的逻辑允许您直接在渲染中使用prop，则也可以-

myArrays = this.state.myArrays.filter(row => {
      return row.name.toLowerCase().indexOf(this.props.filterName.toLowerCase()) >= 0;
 });

编辑-使用componentDidUpdate（）

如注释中正确指出的，componentWillReceiveProps()已过时。请改用componentDidUpdate()。

componentDidUpdate(){
     this.setState({filterName: this.props.filterName})
}