如何在使用反应挂钩的 setState 方法之后访问更新的 state？

Question

单击按钮时，我想将 state 设置为selectedMealPlan ，将更新的 state 存储到localStorage并路由到另一个组件。

  const [selectedMealPlan, setSelectedMealPlan] = useContext(
    selectedMealPlanContext
  );
  const AddItem = (e: any) => {
    setSelectedMealPlan((prev: any) => ({
      ...prev,
      nutrients: {
        newValue: "newValue",
      },
    }));
    localStorage.setItem("mealplan", JSON.stringify(selectedMealPlan))
    history.push("/home");
  };

问题是 setState() 是异步的，我只能将旧的 state 存储到 localStorage，有没有办法可以访问最新的 state？

Answer 1

我会使用useEffect来观察selectedMealPlan的变化，当检测到时，调用setItem ：

const AddItem = (e: any) => {
    setSelectedMealPlan((prev: any) => ({
        ...prev,
        nutrients: {
            newValue: "newValue",
        },
    }));
};
useEffect(() => {
    localStorage.setItem("mealplan", JSON.stringify(selectedMealPlan))
    history.push("/home");
}, [selectedMealPlan]);

您还可以将新的 state object 保存在setSelectedMealPlan回调内的变量中，然后都使用它调用setItem并将其返回给新的 state ，但这很奇怪。