Question

我有一个带有搜索字段和项目列表的组件，我在其中使用搜索字段中的值来过滤项目数组并更新列表。这是负责此操作的组件的各个部分：

this.state = {
  tasks: null,
  unfilteredTasks: null,
};

componentDidMount() {
    this.gateway.loadTasks().then(result => {
        this.setState({tasks: result, unfilteredTasks: result})
    })
}

onSearchChange(event) {
    const value = event.target.value;
    const propsToCheck = ['task.text', 'type', 'status', 'topic.name'];
    this.setState(prevState => {
      const tasks = prevState.unfilteredTasks.filter(obj => checkObjectContainsValue(obj, value)(propsToCheck));
      return {tasks: tasks};
    })
  }

render() {
    return <TasksPresentation
      <TasksList
        tasks={this.state.tasks}
        onSearchChange={(event) => this.onSearchChange(event)}>
      </TasksList>
    </TasksPresentation>
  }

有了这个，我可以在开发人员工具中看到组件的状态正在改变，任务列表正在被过滤，但是列表没有被重新渲染。为什么会这样，我该如何解决？

更新

在进一步检查组件链时。我可以看到，负责呈现列表的tas列表表组件是使用prop rows（即从父组件向下发送的tasks列表）的类组件来构建状态：

constructor(props) {
    super(props);
    this.state.data = this.transformRows(props.rows)
  }

React不会在状态更改时重新渲染组件

0 个答案: