更新 axios post 请求中的全局状态

Question

我有一个全局令牌变量，每当我使用 axios 发出 API 请求时，我都想更新该变量。我遇到的问题是如何更新 token 变量，因为 axios 请求不是在功能组件中发出的，所以在发出此类请求时我无法利用 React hooks。

const logInUser = async (usernameOrEmail, password) => {

  //const myContext = useContext(AppContext);
  //^ gives an error b/c it's a react hook

  axios
      .post(
        `https://jellybackend.herokuapp.com/authenticate`, {
          username: usernameOrEmail,
          password: password,
        })
      .then((response) => {
    
        //myContext.setToken(response.data.token); //update token set , error since not a functional component
        console.log(response);
      
        tokenGlobal = response.data.token


      })
      .catch((error) =>
      console.log(error)
      );
};

我正在将我的令牌设置为全局状态，因此我在 App.js 中定义了钩子，如下所示

export default function App() {
  
  //define global variable of token
  const [token, setToken] = useState("");

  const userSettings = {
    token: "",
    setToken,
  };


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

任何有关如何更新我的全局状态变量或如何重构我的代码的想法将非常感激！

我最终希望发生的是，每当用户登录时，令牌都会更新，因为这是从 axios post 请求返回的内容。

下面的按钮是用户登录的方式

function LoginScreen(props) {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  
  const myContext = useContext(AppContext);


  return (
    ...
        <Button
          onPress={ () =>  {logInUser(email, password);} //I want to update the token here...
          w="40%"
          py="4"
          style={styles.button}
        >

Answer 1

一个非常简单且琐碎的重构是将回调函数传递给 logInUser 实用程序。

例子：

const logInUser = async (usernameOrEmail, password, onSuccess, onFailure) => {
  axios
    .post(
      `https://jellybackend.herokuapp.com/authenticate`, {
        username: usernameOrEmail,
        password: password,
      })
    .then((response) => {
      onSuccess(response);
      console.log(response);
    })
    .catch((error) =>
      onFailure(error);
      console.log(error);
    );
};

...

function LoginScreen(props) {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  
  const myContext = useContext(AppContext);

  const successHandler = response => myContext.setToken(response.data.token);

  const failureHandler = error => myContext.setToken(null);

  return (
    ...
    <Button
      onPress={() => logInUser(email, password, successHandler, failureHandler)}
      w="40%"
      py="4"
      style={styles.button}
    >
      ...
    </Button>
    ...
  );
}

Answer 2

您可以在模块中设置 axios 调用，然后该模块可以返回您想要存储在全局状态中的值。

您的 axios 调用本身不必存在于功能组件中，但需要在该解决方案的一个组件中导入/调用。

因此，您可以将 axios 调用更改为模块函数内的调用，然后可以导出该函数，例如 globalsapi.js，然后导入到您的功能组件中：

exports.logInUser = async () =>  {
  const globalData = await axios
   .post(
    `https://jellybackend.herokuapp.com/authenticate`, {
      username: usernameOrEmail,
      password: password,
    });
    const token = await globalData.data.token;
    return token;
}

现在，无论您决定在何处调用 setToken 状态更新，您只需导入该函数并设置全局令牌即可：

import { logInUser } from './globalsapi';

logInUser().then(data => {
    myContext.setToken(data);
});

您可以将所需的任何参数传递给 logInUser 函数。