React Context状态变更后未触发重渲染，请求排查原因

你的理解没问题：当Context中的状态发生变更时，消费该Context的组件确实应该触发重渲染。问题出在你的代码中直接修改了数组的原引用，导致React无法识别状态变化。

核心问题：直接修改原数组引用 #

在AddElementToArray函数中，你直接对传入的array（也就是favorite或cart的原状态数组）使用splice和push方法——这两个方法都会直接修改原数组，之后你又返回了同一个数组引用。

React的useState采用浅比较来判断状态是否更新：如果新状态和旧状态的引用相同，React会认为状态没有变化，因此不会触发组件重渲染。同时你在handleAddFavorite和handleAddCart里直接console.log(favorite/cart)会打印旧值，这是因为useState的更新是异步的，要查看最新状态需要借助useEffect。

修正方案：创建新数组，更新引用 #

解决方法很简单：每次操作时创建原数组的副本，修改副本后再返回，确保状态更新时传入的是新的数组引用。

修改后的AddElementToArray函数可以这样写：

const AddElementToArray = (item: item, array: item[]) => {
  // 复制原数组，生成新引用
  const newArray = [...array];
  if (newArray.includes(item)) {
    newArray.splice(newArray.indexOf(item), 1);
  } else {
    newArray.push(item);
  }
  return newArray;
};

或者用更函数式的写法（避免直接修改数组）：

const AddElementToArray = (item: item, array: item[]) => {
  return array.includes(item)
    ? array.filter(i => i !== item) // 过滤掉目标元素，返回新数组
    : [...array, item]; // 添加新元素到新数组中
};

这样修改后，每次调用addFavorite或addCart时都会传入新的数组引用，React就能识别到状态变化，触发组件重渲染了。

额外提示：查看最新状态 #

如果需要确认状态是否更新，可以在useEffect中打印：

useEffect(() => {
  console.log("最新收藏列表:", favorite);
  console.log("最新购物车:", cart);
}, [favorite, cart]);

内容的提问来源于stack exchange，提问作者yousefhnaty