javascript - 使用通过 useContext 传递的旧状态值反应 Hook 组件

Question

请看这个沙箱：

https://codesandbox.io/s/use-context-simple-qygdz?file=/src/App.js

*** 你必须去 /check1 开始，当你到达 /check2 时不应该有 ddd，但它现在仍然存在（状态未更新）

当我将一个页面链接到另一个页面时，usecontext 不会传递状态。不知道为什么 - 但我很高兴在帮助下我们能够准确定位问题所在。

标签： javascriptnode.jsreactjs

Answer 1

如果你只使用一个 useState 钩子来更新你的整个上下文，也许它会有所帮助我包括下面的主要部分（这里是一个工作示例的链接）。当我尝试这个时，我看到每个组件中的上下文都发生了变化。

import React from "react";
import "./styles.css";
import ChangeContext from "./components/ChangeContext";
import ViewChange from "./components/ViewChange";

const info = {
  artists: null,
  messages: null,
  songs: null,
  userid: "ddd",
  accesstoken: null,
  refreshtoken: null
};

export const InfoContext = React.createContext();

export default function App() {
  const [context, setContext] = React.useState(info);
  return (
    <InfoContext.Provider value={[context, setContext]}>
      <div className="App">
        <ChangeContext />
        <ViewChange />
      </div>
    </InfoContext.Provider>
  );
}

然后在一个组件中

import React from "react";
import { InfoContext } from "../App";

export default function App() {
  const [context, setContext] = React.useContext(InfoContext);
  return (
    <div className="App">
      <h1>{context.userid} uid</h1>
      <button
        onClick={e => {
          setContext({ ...context, userid: 123 });
        }}
      >
        click me
      </button>
    </div>
  );
}

在另一个组件中检查更改

import React from "react";
import { InfoContext } from "../App";

export default function ChangeContext() {
  const [context, setContext] = React.useContext(InfoContext);
  return (
    <div className="App">
      <h1>{context.userid} uid</h1>
      <button
        onClick={e => {
          setContext({ ...context, userid: 123 });
        }}
      >
        click me
      </button>
    </div>
  );
}

也许试试这个

const [context, setContext] = useState(info);
  return (
    <BrowserRouter>
      <Route exact path="/signup/:id/:access_token" render={() => <InfoContext.Provider value={[context, setContext]}><Signup /> </InfoContext.Provider>} />
      <Route exact path="/" render={() => <Login />} />
      <Route exact path="/home/:id/:access_token/:refresh_token" render={() => <Homepage ></Homepage>} />
      <Route exact path="/artist/:artistid" render={() => <ArtistPage ></ArtistPage>} />
      <Route exact path="/map" render={() => <MapLeaflet />} />
    </BrowserRouter>
  );