Question

请参见此沙箱：

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

***您必须转到/ check1才能开始，当您到达/ check2时不应该出现ddd，但是它仍然存在（状态未更新）

当我将一个页面链接到另一页面时，usecontext不会通过状态。不知道为什么-但是我很高兴在我们的帮助下能够准确地找出问题所在。

Answer 1

我无法发表评论，但是userId是否正在上下文中更新？
artisthomepage.js 中console.log(userid)的值是什么？也许它使用旧值进行渲染，但随后它接收到新值并且不重新渲染组件。

Answer 2

如果仅使用一个useState挂钩（用于更新整个上下文），可能会有所帮助，我在下面包括了主要部分（此处是指向有效的sample的链接）。当我尝试这样做时，我看到每个组件中的上下文都发生了变化。

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

使用通过useContext

2 个答案: