在本机反应中动态编辑数组项

Question

这是我的状态和数组：

this.state = {
  arr: [{
    arrid: 0,
    arrEmail: '',
    arrName: '',
    arrPhone: ''
  }],
  id: 0,
  email: "",
  isChecked: true,
  name: "",
  phone: "",
  isOpen: false,
  editedEmail: '',
  editedName: '',
  editedPhone: ''
};

这是他们被编辑的地方：

updateEmail = value => {
  this.setState({ editedEmail: value });
};
updateName = value => {
  this.setState({ editedName: value });
};
updatePhone = value => {
  this.setState({ editedPhone: value });
};

这是动态编辑元素的功能：

editData = (row) => {
  this.refs.modal2.close();
  var arr3 = this.state.arr;
  var arrid = this.state.id;
  var index = arr3.indexOf(row);
  var editedName = this.state.editedName;
  var editedEmail = this.state.editedEmail;
  var editedPhone = this.state.editedPhone;

  this.setState({
    arrid: arrid,
    arrEmail: editedEmail,
    arrName: editedName,
    arrPhone: editedPhone
  });
}

但它没有被编辑。首先，它们没有被存储。

arr3

Answer 1

在你的 editData 函数中使用它：

this.setState({arr:[...arr3.map(item=>item.arrid===arrid?{...item,arrEmail:editedEmail, arrName:editedName, arrPhone:editedPhone }:item)]});