Question

我已经从此处阅读并尝试了此问题的许多其他变体，但似乎没有起作用。当我使用DropDown更新下面的嵌套 login 对象时，它会清除输入到登录对象。因此，您必须先运行下拉菜单，然后输入其他值。这不是一个好的解决方案。

this.state = {
  login: {
    id: 0,
    firstName: "",
    lastName: "",
    business: "",
    dateIn: 0,
    dateOut: 0,
    staffName: ""
  },
  dropdownOpen: false,
  saveVisitor: false,
  dropDownValue: "",
  inputBoxEnabled: false
};

这是我的方法。

//passes the value from the dropdownbox to the staffNames property
changeDropDownValue(e) {
  const newValue = e.currentTarget.textContent; // e.target.value;

  //The idea is to create a dummy object perform operations on it and then replace the component's state with the updated object
  //https://stackoverflow.com/questions/43040721/how-to-update-nested-state-properties-in-react

  var login = { ... this.state.login }
  login.staffName = newValue;
  this.setState({login})

  this.setState({
    ...this.state,
    inputBoxEnabled: true,
    dropDownValue: newValue
  });
}

有人知道吗？嵌套对象似乎很成问题，但在将数据发送到db时是必需的。

Answer 1

您不应像这样连续两次对this.setState进行两次操作，因为setState是异步的。秒中的 this.state 值尚未更新。

而不是尝试：

var login = { ... this.state.login, staffName: newValue }

this.setState({
  ...this.state,
  login,
  inputBoxEnabled: true,
  dropDownValue: newValue
});

Answer 2

您要对setState进行两次呼叫，在第二次呼叫中，您要传递当前的state（但已修改）。 setState异步更新状态，第二个state调用中的setState值没有新的login值，将在更新后的{{1} }值。这会使您在第一次致电login时所做的更改都丢失了。

要么：

打一次setState
仅显式更新必须更改的字段

您还可以考虑使用React钩子中的setState并将状态与这些钩子隔离。

反应更新嵌套状态对象会删除其他值

2 个答案: