即使在状态更改后，来自状态数组的动态映射组件也不会更新

Question

我正在映射状态中的数组以动态构建下拉列表。我有两种工作方法来添加和删除数组中的值。当我删除并向数组添加值时，我希望 UI 元素也随着状态的变化而更新。添加有效，但每次删除都失败。我已经确认状态中的数组正在正确更改，但我只能删除最新的组件而不是特定的组件。感谢您的帮助。

 //
 handleToggle() {
    return this.state.AdditionQueryArray.map((array, index) => {
      let key = array.key;
      return (
        <div>
          <Select
            onChange={(e) => this.AdditionalOperatorHandleChange(e, key)}
            options={this.state.OperatorOptions}
            placeholder="Select Operator"
            menuPortalTarget={document.body}
            menuPosition={"fixed"}
          />
          <button onClick={() => this.deleteAdditonalQuery(index)}>
            Delete
          </button>
          {this.forceUpdate}
        </div>
      );
    });
  }

  createAdditionalQuery() {
    const state = this.state;

    let key = Math.random().toString(36).substring(7);

    var copyArr = [...this.state.AdditionQueryArray];

    copyArr.push({
      key: key,
      field: "fieldDefault",
      property: "propertyDefault",
      PropValue: "Propvalue",
    });
    this.setState({
      AdditionQueryArray: copyArr,
    });
  }

  deleteAdditonalQuery(indexVal) {
    var state = this.state;

    var copyArr = [...this.state.AdditionQueryArray];

    if (indexVal > -1) {
      copyArr.splice(indexVal, 1);
    }

    this.setState({
      AdditionQueryArray: copyArr,
    });
  }

  render() {
    return (
      <div>
        <button onClick={this.createAdditionalQuery}>Add Query </button>
        {this.handleToggle()}
      </div>
    );
  }
  ////

Answer 1

浅拷贝和array.splice 是通过索引从数组中删除元素的有趣方式。我建议改用array.filter，它更干净。我建议在更新存储在状态中的数组时始终使用功能状态更新，尤其是在循环中附加的回调中使用时。这样可以避免任何陈旧状态的外壳。

deleteAdditonalQuery(indexVal) {
  this.setState(prevState => ({
    AdditionQueryArray: prevState.AdditionQueryArray.filter(
      (el, index) => index !== indexVal
    ),
  }));
}

与添加处理程序类似，使用功能状态更新。

createAdditionalQuery() {
  this.setState(prevState => ({
    AdditionQueryArray: prevState.AdditionQueryArray.concat({
      key: Math.random().toString(36).substring(7),
      field: "fieldDefault",
      property: "propertyDefault",
      PropValue: "Propvalue",
    }),
  }));
}

在handleToggle 中删除“死”的强制更新代码，它不应该是必要的。无论如何它都没有被调用。不要忘记为被映射的最外层元素添加一个 React 键。

handleToggle() {
  return this.state.AdditionQueryArray.map((array, index) => {
    const key = array.key;
    return (
      <div key={key}> // <-- add React key!
        <Select
          onChange={(e) => this.AdditionalOperatorHandleChange(e, key)}
          options={this.state.OperatorOptions}
          placeholder="Select Operator"
          menuPortalTarget={document.body}
          menuPosition={"fixed"}
        />
        <button onClick={() => this.deleteAdditonalQuery(index)}>
          Delete
        </button>
      </div>
    );
  });
}