javascript - 根据索引 react setState多个数组

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 的工作原理如下:在我的 map 上，我给每个输入一个名称，其中包含 map 生成的索引，因此名称类似于“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
    }
  }
})