javascript - ReactJS 上下文在使用 useEffect 钩子(Hook)获取后重新渲染

Question

我目前正在尝试通过整个应用程序使用我的context provider传递数据，但是触发的钩子(Hook)只返回它的初始值并且不会重新触发 .

这是我的主要 App 组件中的应用程序布局，它不包含任何状态。

class App extends Component {
  render() {
    return (
      <div>
        <BrowserRouter>
          <UserContextProvider>
            <div className="container">
              <Header />
              <Switch>
                <Route exact path="/" component={Home} />
                <Route exact path="/login" component={LoginPage} />
                <PrivateRoute exact path="/secret-page" component={SecretPage} />
              </Switch>
            </div>
          </UserContextProvider>
        </BrowserRouter>
      </div>
    );
  }
}

export default App;

每当 App 组件首次呈现时，它会触发 UserContextProvider，后者会触发 onEffect Hook 。这个钩子(Hook)试图获取一些数据，但是由于用户没有登录，它只是返回它的原始值[]。

这是上下文提供者

const UserContextProvider = ({children}) => {
  const [userSettings, setUserSettings] = useState([]);
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  useEffect(() => {
    if (userid !== null) {
      fetch(
        process.env.REACT_APP_API_URL + "/authenticated/get-permissions",
        requestOptions
      )
        .then(response => response.json())
        .then(response => {
          setUserSettings(response.data);
          setIsLoggedIn(true);
        })
        .catch(error => console.log(error));
    } else {
      console.log(userSettings);
      setIsLoggedIn(false);
    }
  }, []);
  return (
    <UserContext.Provider value={userSettings}>{children}</UserContext.Provider>
  );
};

现在，当上面的代码最初触发时，userid 值为 null 但在 LoginPage 子组件中进行身份验证后，它变为 token 。我的问题是，即使登录后 userid 的值发生变化， Hook 也不会再次触发。

我只想提一下，我从本地存储中的一个单独文件中获取了 userid 值并将其导入。

我已经尝试在函数内的空数组参数中设置 userid 值，但这不起作用。

如何在 userid 值更改后再次触发我的 useEffect 钩子(Hook)？

--- 编辑-----

userid 以这种方式从另一个名为 fetchRequestOptions 的文件导入:

import {requestOptions, userid} from "./fetchRequestOptions";

在我的 fetchRequestOptions 文件中，我有以下代码:

let userid = localStorage.getItem("userid");
let accessToken = localStorage.getItem("accesstoken");
let requestOptions ={ <my request options are here>}

Answer 1

为了让使用 userid 的钩子(Hook)在它改变时重新运行，您需要将它保持在一个状态中。然后，LoginPage 需要连接到 Context 并使用 setUserid 更新它的值。

const UserContextProvider = ({ children }) => {
    const [userSettings, setUserSettings] = useState([]);
    const [isLoggedIn, setIsLoggedIn] = useState(false);
    // If you are reading directly from localstorage you might
    // want to use localStorage.getItem("userid") as the initial value
    const [userid, setUserid] = useState(null);

    useEffect(() => {
        // ...
    }, [userid]);

    return (
        <UserContext.Provider value={{ userSettings, setUserid }}>
            {children}
        </UserContext.Provider>
    );
};

关键是 userid 需要在一个状态中，这样它可以在您需要其最新值的任何组件中触发新的渲染。

您可能会发现在您的 Context 中有一个特定的自定义 Hook 会更干净，它可以处理用户 ID 的逻辑(获取和更新)。这是一个不错的选择，但它只会使 userid 在此上下文中可用。如果您需要在其他地方使用它，您需要从上下文 value 属性中导出它。

const useUserid = () => {
    const [userid, setUserid] = useState(null);

    useEffect(() => {
        const fetched_userid = //...
        setUserid(fetched_userid);
    }, []);

    return userid;
};

const UserContextProvider = ({ children }) => {
    // ...
    const userid = useUserid();

    useEffect(() => {
        // ...
    }, [userid]);

    return (
        <UserContext.Provider value={userSettings}>{children}</UserContext.Provider>
    );
};