React modal始终采用map函数的最后一个元素

React modal始终采用map函数的最后一个元素

您正在使用相同的变量来确定所有

TodoItem

的打开状态。结果似乎是它仅从数组中获取最后一个值，但实际上每个模态都同时打开，而最后一个是唯一可见的模态。

// editItem here is used to determine the open state of both modalsconst { items, editItem } = this.props.todo ...{  items.map((item, index) => {    const editedTitle = item.title    return (      <TodoItem         key={item.id}         title={item.title}        id={item.id}        editedTitle={editedTitle}        onChange={this.handleChange}        editItem={editItem} // Same value      />    )  })}...let { editItem } = this.props<Modal isOpen={editItem}>  // All will open and close at the same time

相反，请使用其他标志，或仅按以下方式管理每个孩子的打开状态：

<span className="mx-2 text-success" onClick={() => this.setState({open: true})} >  <i className="fas fa-pen"></i></span>...<Modal isOpen={this.state.open}>