Question

我正在构建一个页面，它从服务器获取一个对象数组列表，我有几个复选框作为过滤器，用户将选中或取消选中该复选框，我将不得不过滤列表，但我有问题现在重新登记清单。以下是我的部分代码。

filterItem () => {
   // logic goes here
   console.log(filteredItems)

}

renderItems (items) => {
  return(
     //map logic goes here
  )
}

render(){
   return(
      {this.renderItems(this.props.item)}
   )
}

如何通过将filteredItems作为参数传递给它来重新渲染renderItems函数？我尝试了this.renderItems(filteredItems)，但没有看到我的列表已更新。

Answer 1

您可以将items设置为组件状态

constructor(){
    super();
    this.state = {
        items: this.props.items
    }
}

并使用{this.renderItems(this.state.items)}呈现它。如果我清楚地了解您，并且当用户点击复选框时您过滤并更改了items数组，则只需setState这个新数组，您的组件就会重新呈现自己。

Answer 2

道具或组件的状态不会改变，因此您的组件不会被重新渲染。您可能希望使用state（请参阅文档here）来存储数据并相应地进行更改，以便重新呈现组件。

Answer 3

https://facebook.github.io/react/docs/react-component.html

更改道具或州可能会导致更新。

你没有做任何一件事

过滤功能不会反应

3 个答案: