reactjs - 更新 "UseContext array"无法重新渲染/生成新组件

Question

使用context存储数组并尝试array.map生成组件列表，但是UI没有重新渲染显示所有组件。

项目背景:

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

我的目标:

1. 当用户按下“添加”时
2. 上下文中的数组将被插入其中的新值
3. UI 将重新渲染并生成一个新组件

我的问题:

我已经尝试使用 useState 来存储数组，这完全没问题，因为一旦我使用 setArray 更新列表，它将触发重新渲染并显示一个新组件。

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

1. 我还应该使用 useState 来实现我的目标吗？ (然后我必须管理 2 个变量，即上下文和状态，我认为这是处理它的虚拟方法。)
2. 还有其他方法可以实现我的目标吗？

这是沙盒演示: https://codesandbox.io/s/falling-field-ur748?file=/src/App2.js

Answer 1

只有当上下文提供的值发生变化时，订阅上下文的组件才会重新渲染。

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

在状态中维护列表，并将其与状态更新程序 setList 一起作为值传递给 Provider。

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

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

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

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>
      ))}
    </>
  );
}