在 React 中动态更新“状态”会覆盖整个状态答案

【问题标题】：Updating 'state' dynamically in React overwrites entire state在 React 中动态更新“状态”会覆盖整个状态
【发布时间】：2019-06-15 02:33:00
【问题描述】：

好的，所以我正在尝试在 React 中构建一个表单，我可以在其中在多个输入中输入值，然后提交并让值填充表格中的指定单元格。我正在尝试使用“onChange”来更新状态，但是当我输入值时，我的初始状态会被完全覆盖。

所以，如果我设置：

state = {
    Jan012019: {
      first: null,
      second: null
    }
  };

然后尝试通过在“first”的输入中输入“3”来更新状态：

this.setState(
      {
        Jan012019: {
          [e.target.name]: e.target.value
        }
      },
      function() {
        console.log(this.state);
      }
    );

状态显示为：

Jan012019 {
    first: '3'
}

从状态中完全删除“第二”，如果我尝试将值也输入到“第二”输入中，它会从状态中删除“第一”。这里发生了什么？我已经看过其他示例和解决方案，并且我相当确定我的代码与此处另一个问题的解决方案完全一样，但仍然无法正常工作。完整代码如下。

import React from "react";

class InputForm extends React.Component {
  state = {
    Jan012019: {
      first: null,
      second: null
    }
  };

  updateTable = e => {
    this.setState(
      {
        Jan012019: {
          [e.target.name]: e.target.value
        }
      },
      function() {
        console.log(this.state);
      }
    );
  };
  onClick = e => {
    e.preventDefault();
    console.log(this.state);
  };

  render() {
    return (
      <form className="ui form" style={{ marginTop: "50px" }}>
        <div className="inline field">
          <label style={{ marginRight: "27px" }}>First Input</label>
          <input
            name="first"
            type="number"
            placeholder="Enter value"
            onChange={this.updateTable}
          />
        </div>
        <div className="inline field">
          <label>Second Input</label>
          <input
            name="second"
            type="number"
            placeholder="Enter value"
            onChange={this.updateTable}
          />
        </div>
        <button onClick={this.onClick}>Click</button>
      </form>
    );
  }
}

export default InputForm;

我还尝试将输入值设置为：

value={this.state.Jan012019.first}

看看这是否有什么不同，但不行。

【问题讨论】：

React 不使用深拷贝，认为 setState 更像 -> Object.assign(current, new)
是的，我现在明白了。感谢您的回复

标签： javascript reactjs object state

【解决方案1】：

那是因为您正在重置 setState 中的整个 Jan012019 对象。

Jan012019: {
  [e.target.name]: e.target.value
}

您需要先传播原始的 Jan012019 对象，以保留其他字段

this.setState({ 
   Jan012019: { 
      ...this.state.Jan012019, [e.target.name]: e.target.value 
   }
})

【讨论】：