Reactjs 更新a"；UseContext数组“；无法重新渲染/生成新组件

使用上下文存储数组并尝试使用array.map生成组件列表，但UI没有重新呈现以显示所有组件

课程背景：

我有一个包含数组的上下文，UI将有一个“添加”按钮

我的目标：

当用户按“添加”时

上下文中的数组将在其中推送一个新值

UI将被重新加载并生成一个新组件

我的问题：

我尝试使用useState存储数组，这是完全正确的，因为一旦我使用setArray更新列表，它将触发重新渲染并显示新组件

但是，当我尝试使用useContext时，页面将不会重新呈现

我应该仍然使用useState来实现我的目标吗？（然后我必须管理两个变量，即上下文和状态，我认为这是一种处理它的虚拟方式。）

有没有其他方法可以实现我的目标

以下是沙盒演示：

---

只有当上下文提供的

值发生更改时，订阅上下文的组件才会重新呈现

在这里，将值推送到列表将不起作用，因为推送时，
列表
数组的引用不会改变。因此，在这种情况下，您应该结合使用状态和上下文

将列表保持在状态，并将其与状态更新程序
setList
一起作为值传递给提供程序

const [ list , setList ] = React.useState([121, 123])

  return (
    <UserContext.Provider value={[list, setList]}>
      <App2 />
    </UserContext.Provider>
  );

const[list，setList]=React.useState（[121123]）
返回(
);

现在从订阅上下文的组件更新状态

export default function App2() {
  const [list, setList] = useContext(UserContext);
  const buttonOnClick = () => {
      setList(prevList => [...prevList, 321])
  };
  return (
    <>
      <button onClick={buttonOnClick}>Add</button>
      {list.map((item) => (
        <p>{item}</p>
      ))}
    </>
  );
}

导出默认函数App2（）{
const[list，setList]=useContext（UserContext）；
常量按钮非单击=（）=>{
setList（prevList=>[…prevList，321]）
};
返回(
添加
{list.map（（项）=>(
{item}

))}
);
}
谢谢您的解释。有可能不将上下文对象更改为useState来实现目标吗？我认为我的知识没有任何问题。您不仅希望上下文提供更新的值，还需要重新渲染以渲染列表中的新项。在react中触发重新渲染的唯一方法是更改状态或道具。让我重述一下您的答案，看看我的理解是否正确。因为在上下文数组中推送新值不会更改引用。反应不会被视为状态或道具的改变，因此没有重新渲染。因此，我必须同时使用上下文和usestate来执行任务是的，这是正确的！由于引用检查的原因，对数组或对象进行变异不是一种好的做法。