Question

我将 useEffect 与 useContext 和 useState 一起使用，以便在上下文中的状态发生变化时进行更新。我知道变量本身会发生变化，并且第一次一切正常，但仍然只调用一次 useEffect 。下面是useEffect的代码

    useEffect(() => {
    if (AuthCtx.mealItemTally !== undefined) {
      dispatchOrder({ type: "ORDER_RECOUNT" });
      setTimeout(function () {
        dispatchOrder({ type: "DESTYLER" });
      }, 1000);
    }
  }, [AuthCtx.mealItemTally]);

这是它所依赖的上下文：

const AuthContext = React.createContext({
  onSaveMealItem: (amount, name, id) => {},
  mealItemTally: null,
});

export const AuthContextProvider = (props) => {
  const [mealItems, setMealItems] = useState([]);
  const mealItemHandler = (amount, name, id) => {
    const mealIndex = mealItems.findIndex((items) => items.name === name);
    if (mealItems.length === 0) {
      setMealItems([{id: id, amount: amount, name: name}])
    }
    else if (mealIndex < 0) {
      mealItems.push({id: id, amount: amount, name: name})
      setMealItems(mealItems);
    } else {
      mealItems[mealIndex].amount += amount;
      setMealItems(mealItems);
    }
    console.log(mealItems)
    console.log(mealIndex)
  };


  return (
    <AuthContext.Provider value={{ onSaveMealItem: mealItemHandler, mealItemTally: mealItems }}>
      {props.children}
    </AuthContext.Provider>
  );
};

任何帮助将不胜感激

编辑：我设法解决了这个问题。我没有在上下文中正确更新我的 mealItems 状态。这是它的正确代码

if (mealItems.length === 0) {
      setMealItems([{ id: id, amount: amount, name: name }]);
    } else if (mealIndex < 0) {
      setMealItems((oldItems) => [
        ...oldItems,
        { id: id, amount: amount, name: name },
      ]);
    } else {
      setMealItems(
        mealItems.map((item) =>
          item.name === name ? { ...item, amount: item.amount + amount } : item
        )
      );
    }

我的上下文相关 useEffect 钩子只在第一次被调用时触发

0 个答案: