javascript - 如何编辑对象并将新对象传递给数组？ ReactJS， Material UI

Question

我需要编辑对象数组并向 View 显示新值。我对 ReactJS 还很陌生，所以我尝试像下面那样做，但是编辑后我失去了除了我编辑过的之外的所有内容。如果我的方法正确的话，你能给我信息吗？有什么建议如何做到这一点吗？

父组件:

 constructor(props) {
  super(props);
  this.state = { data: [], open: false, openEdit: false, openAlert:false, priority:'', nameTask:'', deadline:new Date() };
}
  // Edit row from table
handleEdit = e => {    
 const index = e.currentTarget.getAttribute('index');
 let foundObject = this.state.data[index];

 let nameTaskNew = foundObject.nameTask;
 let priorityNew = foundObject.priority;
 let deadlineNew = foundObject.deadline;
 this.setState({openEdit: true, nameTask: nameTaskNew, priority: priorityNew, deadline: deadlineNew });
}

handleSubmitEdit = (e) => {
 const err = this.validate();
  if (!err) {
   this.setState({
     // Set new data array
     data: [this.state],
     // Clear form
     openEdit: false,
     nameTask: "",
     nameTaskError: "",
     priority: "Low",
     deadline: new Date()
   });}}

render() {
 const actions = [
 <FlatButton label="Edit" primary={true} keyboardFocused={true} onClick={e => this.handleSubmitEdit(e)} />];

return (
    {/* Edit form */}
    <form>
    <Dialog title="Edit your Task" open={this.state.openEdit} actions={actions}>
      <TextField floatingLabelText="Task" value={this.state.nameTask} errorText={this.state.nameTaskError}
      onChange={e => this.handleTextFieldChange(e)}  
      onKeyPress={this.handleKeyPress} />
      <DatePicker floatingLabelText="Deadline" value={this.state.deadline} onChange={this.handleChangeDate} />
      <SelectField floatingLabelText="Priority" value={this.state.priority} onChange={this.handleChangeSelectField}>
          <MenuItem value="High" primaryText="High" />
          <MenuItem value="Medium" primaryText="Medium" />
          <MenuItem value="Low" primaryText="Low" />
      </SelectField>
    </Dialog>  
  </form>
);}}

export default Home;

Answer 1

我建议你看看这篇文章。我相信这就是您正在寻找的: https://medium.com/@thejasonfile/using-the-spread-operator-in-react-setstate-c8a14fc51be1