javascript - 切片发生在代码中，但不会在 UI 中更新

Question

• 初始状态有三个下拉菜单。
• 选择第一个下拉列表后，第二个下拉列表值将被加载
• 选择第二个下拉值后。
• 一组新的下拉负载。
• 当我选择第二组的删除按钮时。
• 它不会删除该集合，但会删除第一个集合。
• 当我调试removeSelectedValue方法时，切片正确发生，但在更新中没有更新
• 您能告诉我如何传递 queryComponents 值，以便它在 UI 中更新。
• 你能告诉我如何解决这个问题吗？
• 以便将来我自己修复它。
• 在下面提供我的相关代码片段和沙箱。
• 我的所有代码都在 demo.js 中

https://codesandbox.io/s/4x9lw9qrmx

removeSelectedValue = index => {
    console.log("removeSelectedValue--->", index);
    let seletedValues = this.state.queryComponents;
    seletedValues.splice(index, 1);
    console.log("spliced Values--->", seletedValues);
    this.setState({ queryComponents: seletedValues });
  };

  render() {
    let queryComp = this.state.queryComponents.map((value, index) => {
      return (
        <AutoCompleteComponent
          key={index}
          value={value}
          index={index}
          valueSelected={this.getSelectedValue}
          removeSeleted={this.removeSelectedValue}
        />
      );
    });

    return <div>{queryComp}</div>;
  }

Answer 1

当你这样做时let seletedValues = this.state.queryComponents; 您正在创建对该变量的引用，而不是制作副本。

您需要确保用新的对象/数组替换您的状态，以便重新渲染发生。

请尝试这个:

removeSelectedValue = index => {
    this.setState(prevState => ({
        queryComponents: prevState.seletedValues.filter((a, i) => (i !== index));
    });
};

该过滤器函数相当于您使用的拼接，但返回一个新数组而不是修改原始数组。

另一方面，我传递 setState 一个使用 prevState 的函数，从而使代码更短。