javascript - 用变量传播 prevState

Question

我正在尝试重构代码库，但我陷入了困境。我基本上是尝试根据选择框的 onChange 事件更新状态。

在本例中，handleFilterChange 函数中的 searchCriteria 参数是 ingredients。

但假设我有另一个选择框，其中包含anotherIngredients 的选项。我无法根据变量传播 prevState 。

我必须输入...prevState.ingredients

有正确的方法吗？

所以我的组件状态是:

 state = {
    ingredients: {
      name: "",
      operation: "",
      value: ""
    },
  anotherIngredients: {
      name: "",
      operation: "",
      value: ""
    }
  };

我的处理程序是:

handleFilterChange = (event, searchCriteria, searchCriteriaKey) => {
    let newValue = event.target.value;
    this.setState(prevState => ({
      [searchCriteria]: {
        ...prevState.ingredients,
        [searchCriteriaKey]: newValue
      }
    }));
  };

我的选择框组件是:

<Select
  value={ingredients.name}
  options={[
            { key: "", value: "Please choose an ingredient" },
            { key: "ingredient1", value: "INGREDIENT 1" },
            { key: "ingredient2", value: "INGREDIENT 2" },
            { key: "ingredient3", value: "INGREDIENT 3" },
            { key: "ingredient4", value: "INGREDIENT 4" }
           ]}
           changeHandler={event =>
            this.handleFilterChange(event, "ingredients", "name")
           }
 />

希望我能解释一下自己。谢谢!

Answer 1

您应该重用变量 searchCriteria 从状态中提取以前的值。

handleFilterChange = (event, searchCriteria, searchCriteriaKey) => {
    let newValue = event.target.value;
    this.setState(prevState => ({
        [searchCriteria]: {
            ...prevState[searchCriteria],
            [searchCriteriaKey]: newValue
        }
    }));
};