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

Posted 2023-02-22

【中文标题】在 React 中动态更新“状态”会覆盖整个状态

【英文标题】：Updating 'state' dynamically in React overwrites entire state

【发布时间】：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)

是的，我现在明白了。感谢您的回复

【参考方案1】：

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

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

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

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