时间戳

首页 > 解决方案 > 在 React 中动态更新“状态”会覆盖整个状态

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

问题描述

好的，所以我正在尝试在 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}

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

标签： javascriptreactjsobjectstate

解决方案

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

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

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

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

推荐阅读