react-select 不保留操纵 arrays 的索引

Question

在 react-selects 数组中，最后一个输入之前的任何输入都将破坏后续输入的索引。 我知道密钥的 uuid（不推荐）以及密钥的 Math.floor(Math.random() * 10000)。 但我仍然无法让它工作。

使用 Math.floor(Math.random() * 10000) 生成的键会破坏输入：您无法在该字段中填充任何内容。

这是一个索引问题，我相信这是插件内部的问题。 我需要澄清这不是希望的问题。

我创建了一个以 Math.floor(Math.random() * 10000) 为键的代码框，您会看到。

https://codesandbox.io/s/codesandboxer-example-forked-dcvdj?file=/example.tsx

添加至少一个输入并尝试填充。 它不会让你。

将index放入key中，您会看到可以填充，但是当您尝试删除它时，该值保持不变，而该值下的值将被删除（索引问题，我知道）。 这是因为当 state 更新时，map 将再次运行并重新索引列表。

Answer 1

一种解决方案是将您的 AsyncSelect 值引用到一个数组中，如下所示：

state = {
    inputValue: "",
    fieldsArr: [],
    values: []
  };

因此，您的render() function 看起来像：

render() {
    return (
      <div>
        <pre>inputValue: "{this.state.inputValue}"</pre>
        {this.state.fieldsArr.map((item, index) => (
          <div key={index}>
            <span>{item}</span>
            <AsyncSelect
              cacheOptions
              loadOptions={this.loadOptions}
              defaultOptions
              value={this.state.values[index]} // <--- This will reference your state value
              onChange={(e) => this.handleChange(e, index)}
              onInputChange={this.handleInputChange}
            />
            <button onClick={() => this.handleDelete(index)}>delete</button>
          </div>
        ))}
        <button onClick={this.handleAdd}>add</button>
      </div>
    );
  }

然后，您将添加一个handleChange回调来处理 AsyncSelect onChange事件。

handleChange(el, index) {
    let vals = this.state.values;
    vals[index] = el;
    this.setState((prev) => ({ ...prev, values: vals }));
  }

最后相应地编辑handleDelete和handleAdd函数：

handleAdd = () => {
    let newArr = this.state.fieldsArr;
    let values = this.state.values;
    newArr.push(this.state.fieldsArr.length + 1);
    values.push("");
    this.setState((prev) => ({ ...prev, fieldsArr: newArr }));
  };

  handleDelete = (index) => {
    let newArr = this.state.fieldsArr;
    let values = this.state.values;
    newArr.splice(index, 1);
    values.splice(index, 1);
    this.setState((prev) => ({ ...prev, fieldsArr: newArr, values }));
  };

Answer 2

我的解决方案是创建一个计数器，在添加字段上添加到该计数器，然后在删除时使用 indexOf 项目删除。

https://codesandbox.io/s/codesandboxer-example-forked-dcvdj?file=/example.tsx