React useContext() 总是以不同的方式返回初始值 children

Question

我需要通过多个组件共享全局变量，我的上下文似乎没有按预期工作。

我在单独的文件中声明 globalContext.tsx :

export type GlobalContent = {
  entities: entity[]
  setEntities:(c: entity[]) => void,
  pallets: string[],
  setPallets:(c: string[]) => void,
}
export const GlobalContext = createContext<GlobalContent>({
    entities: [], // set a default value
    setEntities: () => {},
    pallets: [],
    setPallets: () => {}
})

然后，在我的 App.tsx 中初始化我的值，然后将我所有的树包装在 Provider 中：

function App() {
  // Init global variables, accessible everywhere using useContext hook
  const [entities, setEntities] = useState<entity[]>([])
  const [pallets, setPallets] = useState<string[]>(["hello"])
  let defaultGlobals: GlobalContent = { entities, setEntities, pallets, setPallets }

  return (
    <GlobalContext.Provider value={defaultGlobals}>
      <BrowserRouter>
        <Routes>
            <Route path="/" element={<Home/>}/>
            <Route path="/picking" element={<Picking/>}/>
            <Route path="/control" element={<Control/>}/>
            <Route path="/place" element={<Place/>}/>
            <Route path="*" element={<NotFound/>}/>
        </Routes>
      </BrowserRouter>
    </GlobalContext.Provider>
  )
}

所以，应该有。在我的组件中（例如），我可以使用以下命令找回我的默认值：

const { entities, setEntities, pallets, setPallets } = useContext(GlobalContext)

但是当我在另一个组件（或）中获取这些数据时使用 :

const { entities, setEntities, pallets, setPallets } = useContext(GlobalContext)

我一直在获取默认值（a.k.a。“defaultGlobals”，带有 [“hello”] 数组）。

我尝试使用相应的 setter 更改我的 entities 或 pallets 内容，并且从 useContext 中提取的变量绝对独立于一个组件和另一个组件。一开始还是获取默认值。

似乎有什么东西破坏了上下文，或者我在这里做错了什么。有帮助吗？

这是 link 到运行 codesandbox。

示例消费者：

export default function Home() {
  const { entities, setEntities, pallets, setPallets } = useContext(
    GlobalContext
  );

  return (
    <div>
      <a href="/other">Move to Other</a>
      <h1>Home component</h1>
      <button onClick={() => setPallets([...pallets, "newPallet"])}>
        Add pallet
      </button>
      {pallets.map((pallet) => {
        return <p>{pallet}</p>;
      })}
    </div>
  );
}

Answer 1

pallets 状态和 React 上下文值更新得很好。问题是您正在使用原始锚标记 (<a />) 在页面之间导航，这会重新加载整个 page/app。换句话说，应用程序被重新挂载并且 React 状态被重置。

使用 Link 组件发出声明性导航操作以在应用程序中移动。

而不是这个：

<a href="/other">Move to Other</a>

导入并使用 Link 组件：

import { Link } from "react-router-dom";

...

<Link to="/other">Move to Other</Link>

React useContext() 总是以不同的方式返回初始值 children

React useContext() always returning initial value in different children

reactjs

react-hooks

use-context