срез происходит в коде, но не обновляется в пользовательском интерфейсе

Question

• есть три раскрывающихся меню в исходном состоянии.
• после выбора первого раскрывающегося списка загружается второе раскрывающееся значение
• после выбора второго раскрывающегося списказначения.
• новый набор выпадающих загрузок.
• , когда я выбираю кнопку удаления из второго набора.
• он не удаляет этот набор, но удаляет первый набор.
• когда я отлаживаю метод removeSelectedValue, то срезы происходят правильно, но при обновлении он не обновляется
• Вы можете сказать мне, как передать значения queryComponents, чтобы он обновлялся в пользовательском интерфейсе.
• Можете ли вы сказать мне, как это исправить.
• , чтобы в будущем я сам это исправил.
• предоставив мой соответствующий фрагмент кода и песочницу ниже.
• весь мой код в 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, чтобы сделать код короче.