Question

我有一个react组件，负责列出数据，如果用户单击特定数据项，它将呈现一个弹出窗口，其中包含用户单击传递给它的数据。弹出窗口在单独的组件中定义，但是在列表组件中定义弹出窗口的单个实例，如下所示：

render(){
  return(
      ...
      {tasks.map((task, index) => {
        return (
            <p><a onClick={() => self.edit(task.id)}>{task.name}</a></p>
        );
      })}
      <EditTaskPopup show={self.state.showEditPopup} onClose={self.onClosePopup} task={self.state.editData} />
      ...
  )
}

edit函数将数据打包并设置组件的状态，以便使editData变量和弹出窗口中包含的数据如下所示：

    self.setState({showEditPopup: true, editData: tasks[x]});

这一切都很好，但是我的问题是我应该如何正确地在弹出容器EditTaskPopup中接收该数据。当父组件加载时，EditTaskPopup的构造函数将触发，因此不会发生任何用户交互，因此不会传递任何值。componentDidMount也是如此。我可以看到在componentDidUpdate触发时传递了正确的值，但是在弹出窗口的正常操作期间也触发了该值，在该操作中，我正在收集有关用户在弹出窗口中键入内容的信息，并将这些值置于状态。组件中是否有一个事件仅在父组件更改传递给它的参数时才触发，而在组件本身内部的状态改变时才触发？

Answer 1

尝试使用生命周期方法：https://reactjs.org/docs/react-component.html#componentdidupdate

将数据动态传递到子组件

1 个答案: