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
    }
  }
})