Question

我正在尝试创建一个过滤列表，用于过滤输入的列表。但不知道为什么if语句不起作用。

这是我写的函数：`

filterList (event) {
    var updatedList = this.props.array; 
    var filterText = this.state.text;
    updatedList = updatedList.filter(function(item){
      console.log(filterText);
      if(item.name === filterText){
        console.log('check', item.name);
      }
    });

有人可以帮我解决这个问题，这是指向我的codepen的链接：LINK

Answer 1

您的过滤器需要更新组件状态中的数组以强制重新渲染。您不更新道具以强制重新渲染，道具更多用于初始数据，或一致数据，可以从顶层更新。

更改句柄功能以将文本传递给filterList函数，并返回结果

handleChange(event) {
  var array = this.filterList(event.target.value);
  this.setState({ text: event.target.value, array: array });
},

filterList (filterText) {
  var updatedList = this.props.array;
  return updatedList.filter(function(item){
    return item.name === filterText;
  });
}

更新getInitialState以使用props：

getInitialState() {
  return { text:'', array: this.props.array};
}

然后在渲染中使用状态而不是道具：

var arrayComponents = this.state.array.map(function(photo) {
     return <li className="photo photo-name">{photo.name} <img className="photo" src={photo.link}/></li>;
})

Answer 2

首先，当我运行您的codepen示例时，我没有看到任何错误，表明this.state.text未定义。它没有过滤任何内容，但它显示的是this.state.text的值。所以这个问题并不是你的问题所暗示的......

那么我们如何过滤这个东西呢？基本上，使用ReactJS组件的想法是，与组件的当前状态相关的所有内容都应该在this.state中，并且基于该状态显示的内容的任何决策都应该在render方法中。请记住，每次使用setState方法更改状态时，它都会触发重新呈现组件。

考虑到这一点，我会这样设置：

您的组件会通过array道具收到照片列表（我可能会将其称为其他内容，因为它不是非常具有描述性而且非常接近到Javascript中的保留字）
组件的状态有一个值：text（同样，不是很具描述性）
组件具有输入元素的handleChange处理程序。我将它连接到输入元素的onChange处理程序 - 不用担心，每次输入元素中的值发生更改时都会调用它。这应该是input元素上唯一的事件处理程序，它应该做的就是调用this.setState({ text: event.target.value });

在渲染方法中执行列表过滤。这里的关键是你不需要保留过滤后的照片列表 - 所有你正在做的就是渲染它，所以只有当你需要时（或者更确切地说，当React认为你的时候）需要并调用render方法）。所以你的渲染方法看起来像这样：

render() {
    var myFilteredList = this.props.array.filter(function(item){
        console.log(filterText);
        if(item.name === filterText){
            console.log('check', item.name);
            return true;
        }

        return false;
    });

    var arrayComponents = myFilteredList.map(function(photo) {
        return <li className="photo photo-name">{photo.name} <img className="photo" src={photo.link}/></li>;
    });

    return (
    <div>
        <h1>Hello, {this.props.name}</h1>
        <p>{this.state.text}</p>
        <input type="text"  onKeyUp={this.handleChange} />
        <ul>
            {arrayComponents}
        </ul>
    </div>
    );
}

那就是它。这有几个好处：

它保持简单 - 不为this.state之外的组件维护任何状态，如果您只需要它来渲染，则根本不要维护它。
它让您的代码更加清晰 - 我接触它的方式，您的组件只有两种方法：handleChange和render
它（应该）更高性能 - React非常擅长根据状态变化决定何时渲染，并且当组件具有最小状态时，它往往更好。（我说＆＃34;应该是＆＃34;只是因为我还没有测试过它。）

ReactJs试图创建一个过滤器列表

2 个答案: