javascript - 如何不可变地改变状态 React

Question

如何在不更改状态中的所有数据的情况下更改状态的内容。

用于上下文；

下面的函数在另一个“handleChange”函数中运行，该函数接受事件并将“event.target”中的各种数据分配给变量 name、pos 和 value。 update 函数创建并返回一个带有数组的对象。我使用该对象来更新状态。每次有调用整体函数的 onchange 事件时，state 只显示当前的 onchange 数据，而不是之前输入的已经发生“变化”的数据(希望你明白我的意思)

进一步说明；

我每次都尝试在输入中使用“onChange”事件处理程序来更新状态。我改变了一个 unput 的值，它反射(reflect)了状态的变化(它的控制台完美地记录了变化)，但是一旦我改变了另一个输入的值，之前状态的变化就消失了。

我想更改输入的值，将该值存储在状态中，更改另一个输入，将该值也存储在数组对象中等，然后能够访问所有值。我现在只能访问最新的

  handleInputChange(e) {
if (e.target.value) {
  e.preventDefault();

  var formDataArray = {
    code: [],
    desc: [],
    qty: [],
    prices: [],
    line_price: []
  };

  let update = function(value, pos, name) {
    switch (name) {
      case "description":
        formDataArray.desc[pos - 1] = value;

        break;
      case "code":
        formDataArray.code[pos - 1] = value;
        break;
      case "qty":
        formDataArray.qty[pos - 1] = value;
        break;
      case "price":
        formDataArray.prices[pos - 1] = value;
        break;
      case "line_price":
        formDataArray.line_price[pos - 1] = value;

        break;
      default:
    }
    return formDataArray;
  };

  var valuesTwo = e.target.name.split("-");

  var name = valuesTwo[1];
  var value = e.target.value;
  var pos = valuesTwo[0];

  //  update(value, pos, name);
  //  update(value, pos, name);
  this.setState({ formData: update(value, pos, name) });
}

更新函数的结果

{code: Array(0), desc: Array(1), qty: Array(0), prices: Array(0), line_price: Array(0)}
code
:
[]
desc
:
["test"]
line_price
:
[]
prices
:
[]
qty
:
[]
__proto__
:
Object

当我更改不同输入的值时

{code: Array(0), desc: Array(2), qty: Array(0), prices: Array(0), line_price: Array(0)}
code
:
[]
desc
:
(2) [empty, "another test"]
line_price
:
[]
prices
:
[]
qty
:
[]
__proto__
:
Object

它说空的部分我想保留以前的数据“测试”

这就是输入的生成方式；它是一个网格系统。有五个输入(将它们视为一行)，当用户单击一个按钮时，会生成另一行(第 2 行)，当单击另一个按钮时，会生成第 3 行。输入字段例如 (2-description)。我想将其保存为某种数组网格以执行某些功能，例如在用户输入字段(例如价格)时添加一整列。

 triggerRows() {
        this.setState({
          invoiceRows: this.state.invoiceRows + 1,
          viewSubmitButton: true
        });
      }

  dynamicRows() {
    var items = [];
    for (var i = 1; i < this.state.invoiceRows; i++) {
      items.push(
        <div>
          <input
            onClick={this.triggerRows}
            type="text"
            name={i + "-code"}
            defaultValue="code"
            key={i}
            onChange={this.handleInputChange}
          />
          <input
            type="text"
            name={i + "-description"}
            defaultValue="description"
            onChange={this.handleInputChange}
          />
          <input
            type="text"
            name={i + "-qty"}
            defaultValue="qty"
            onChange={this.handleInputChange}
          />
          <input
            type="text"
            name={i + "-price"}
            defaultValue="price"
            onChange={this.handleInputChange}
          />
          <input
            type="text"
            name={i + "-line_price"}
            defaultValue="line Price"
            onChange={this.handleInputChange}
          />
          <br />
        </div>

Answer 1

这就是您要实现的目标吗？

var valuesTwo = e.target.name.split("-");

        var name = valuesTwo[1];
        var value = e.target.value;
        var pos = valuesTwo[0];

        //  update(value, pos, name);
        this.setState(state => ({
            formData: {...state.formData, ...update(value, pos, name)}
        }), () => console.log(this.state.formData));