React中如何不可变更新State？动态输入状态丢失问题求助

嘿，我一眼就看出问题出在哪了——你每次触发输入变更时，都重新创建了一个空的formDataArray，完全没用到之前保存在state里的已有数据！这就是为什么旧的输入值会被清空的核心原因。要实现不可变更新，必须基于当前state的已有数据来修改，而不是每次从零开始构建新数组。

下面是一步步的修复方案：

1. 先理清楚状态初始化逻辑 #

首先确保你的state初始化时，formData的结构是完整的，并且和行数量对应：

constructor(props) {
  super(props);
  this.state = {
    invoiceRows: 1, // 初始至少显示一行
    viewSubmitButton: false,
    formData: {
      code: [''],
      desc: [''],
      qty: [''],
      prices: [''],
      line_price: ['']
    }
  };
  // 别忘了绑定事件处理函数
  this.handleInputChange = this.handleInputChange.bind(this);
  this.triggerRows = this.triggerRows.bind(this);
}

2. 重写handleInputChange实现不可变更新 #

关键是利用setState的函数式更新，基于上一次的state来创建新状态，只修改需要更新的位置：

handleInputChange(e) {
  const { value, name } = e.target;
  // 拆分出行索引和字段名（比如"0-description"拆成[0, "description"]）
  const [posStr, fieldName] = name.split("-");
  const pos = parseInt(posStr, 10);

  this.setState(prevState => {
    // 先复制原formData的所有字段，避免直接修改原状态
    const newFormData = { ...prevState.formData };
    
    // 处理字段名映射（description对应desc）
    const targetField = fieldName === "description" ? "desc" : fieldName;
    
    // 复制对应字段的数组，然后修改指定索引的值
    newFormData[targetField] = [...prevState.formData[targetField]];
    newFormData[targetField][pos] = value;

    // 可选：自动计算line_price（数量*价格）
    if (fieldName === "qty" || fieldName === "price") {
      const qty = parseFloat(newFormData.qty[pos]) || 0;
      const price = parseFloat(newFormData.prices[pos]) || 0;
      newFormData.line_price[pos] = (qty * price).toFixed(2);
    }

    return { formData: newFormData };
  });
}

3. 优化新增行的逻辑 #

新增行时，也要同步更新formData的各个数组，确保索引对应：

triggerRows() {
  this.setState(prevState => ({
    invoiceRows: prevState.invoiceRows + 1,
    viewSubmitButton: true,
    formData: {
      ...prevState.formData,
      code: [...prevState.formData.code, ''],
      desc: [...prevState.formData.desc, ''],
      qty: [...prevState.formData.qty, ''],
      prices: [...prevState.formData.prices, ''],
      line_price: [...prevState.formData.line_price, '']
    }
  }));
}

4. 调整动态输入框的渲染逻辑 #

把新增按钮单独放在外面（不要每行都加），同时绑定已有状态作为默认值：

dynamicRows() {
  const items = [];
  // 用0开始的索引，和formData的数组索引完全对应
  for (let i = 0; i < this.state.invoiceRows; i++) {
    items.push(
      <div key={i} style={{ margin: "8px 0" }}>
        <input 
          type="text" 
          name={`${i}-code`} 
          placeholder="Code" 
          onChange={this.handleInputChange}
          value={this.state.formData.code[i] || ''}
          style={{ marginRight: "8px" }}
        />
        <input 
          type="text" 
          name={`${i}-description`} 
          placeholder="Description" 
          onChange={this.handleInputChange}
          value={this.state.formData.desc[i] || ''}
          style={{ marginRight: "8px" }}
        />
        <input 
          type="number" 
          name={`${i}-qty`} 
          placeholder="Qty" 
          onChange={this.handleInputChange}
          value={this.state.formData.qty[i] || ''}
          style={{ marginRight: "8px" }}
        />
        <input 
          type="number" 
          name={`${i}-price`} 
          placeholder="Price" 
          onChange={this.handleInputChange}
          value={this.state.formData.prices[i] || ''}
          style={{ marginRight: "8px" }}
        />
        <input 
          type="text" 
          name={`${i}-line_price`} 
          placeholder="Line Price" 
          value={this.state.formData.line_price[i] || ''}
          readOnly // 自动计算的字段设为只读
          style={{ marginRight: "8px" }}
        />
      </div>
    );
  }
  // 单独添加新增行按钮
  items.push(
    <button key="add-row" onClick={this.triggerRows}>
      Add New Row
    </button>
  );
  return items;
}

核心原理说明 #

React的state更新遵循不可变原则：你永远不能直接修改state对象或数组，必须创建它们的副本并修改副本，再通过setState更新。之前的代码每次都新建空数组，相当于丢弃了所有历史数据，现在的做法是基于上一次的state复制出全新的结构，只修改需要更新的位置，这样所有历史输入值都会被保留下来。

内容的提问来源于stack exchange，提问作者David Mbwana