Question

我有一个非常棘手的问题要问，我正在一个页面上接受来自数据库的多个输入并因此生成了多个输入（输入的数量不是恒定的）

基本上是这样的：

 const form = this.state.inputs.map((input, i) => {
      if (input) {
        return (
          <div key={i}>
            <div>
              <label htmlFor={input.inputLabel}>{input.inputName}</label>
            </div>
            <div className="form-input">
              <input
                name={`${input.inputName}-${i}`}
                type={input.inputType}
                id={input.inputLabel}
                onChange={this.onChange}
              />
            </div>
          </div>
        );
      }
    });

生成具有未知数量值的表单后（取决于数据库）我想保存该表单的所有值，但是因为我不知道我输入了2个数组的数量（我需要保存值和名称，以便稍后在其他页面中显示）

  state = {
  ....
    inputData: {
      names: [],
      values: []
    }
  ....
  };

但是我很难将值实际保存在setState中

 onChange = e => {
    e.preventDefault();
    const { name, value } = e.target;
    var nameIndex = name.split('-');
    const names = [];
    const values = [];
    values[nameIndex[1]] = value;
    names[nameIndex[1]] = nameIndex[0];
    const inputData = { names, values };
    this.setState({ inputData });
  };

setState的工作方式如下：在我的地图上，我给每个输入一个名称，该名称包含由地图生成的索引，因此该名称类似于“ inputname-1”，并且我使用split取出1并更新在setState中所做的两个数组（值，names），并且每次用户在输入中写入内容时，它都会更改数组内的值，如下所示：values [1] =（users input ...），但是我注意到，例如，如果我更改第二个值，索引1和0中位于他之前的值将变得不确定，那么我会丢失某些东西吗？

Answer 1

您正在创建一个新的names和values数组，其中仅填充了一个索引。这就是为什么您要覆盖数组中的其他索引的原因

如果您只想更新特定索引而不进行更改，则可以执行以下操作：

const { name, value } = e.target;
const [key, index] = name.split('-');

this.setState(prevState => ({
   ...prevState,
   inputData: {
      values: Object.assign([], {...prevState.inputData.values }, { [index]: value }),
      names: Object.assign([], {...prevState.inputData.names }, { [index]: key })
   }
}))

另一种选择是使用传播语法获取prevState.inputData.values的副本并在特定索引处更新其值，然后将其设置为inputData：

const { name, value } = e.target;
const [key, index] = name.split('-');

this.setState(prevState => {
  const cloneValues = [...prevState.inputData.values],
        cloneNames = [...prevState.inputData.names];

  cloneValues[index] = value;
  cloneNames[index] = key;

  return {
    ...prevState,
    inputData: {
      values: cloneValues,
      names: cloneNames
    }
  }
})

根据索引反应setState多个数组

1 个答案: