Question

我得到了一个使用 axios 从我的后端获取信息的函数，如下所示：

const getDoH = async () => {
    const user = JSON.parse(localStorage.getItem("user"));
    let config = {
      headers: {
        "Content-Type": "application/json",
        Authorization: "Bearer " + user.accessToken,
      },
      params: {
        username: user.username,
      },
    };

    return await axios.get(API_URL + "get", config);
  };

现在我想在启动时将这些值保存到一个全局变量中，所以我使用了这样的初始状态钩子：

const [initialValues, setInitialValues] = useState(() => {
    const initialSwitchState = getDoH().then(
      (response) => {
       setInitialValues(response.data);
      },
      (error) => {
        console.log(error);
      }
    );
    return initialSwitchState;
  });

之后我得到了一个函数，它从数据库中获取值并将它们映射到我的局部变量上，这个函数看起来像这样：

const setStartValues = () => {
    let newValues = initialSwitchState;
        let valueArray = Object.entries(newValues).map((v, index) => {
          v[1] = initialValues.switchValues[index]
          return v
      });
      newValues = Object.fromEntries(valueArray);
      setValues({...newValues});
  }

我想用一个 final 函数调用这个函数，它是另一个像这样的初始状态钩子：

const [values, setValues] = useState(() => {
    const initialState = setStartValues();}

但是当它到达线路时：

v[1] = initialValues.switchValues[index]

initialValues 仍然是一个承诺。我看不出哪里出错了，因为我使用了异步并等待我的初始 getDoH() 函数。在尝试使用结果之前，我该如何解决这个问题（等待承诺）？亲切的问候。

Answer 1

这里有两个问题：

首先，您需要 await getDoH()，因为这是一个异步函数。

其次，useState()是一个同步函数，所以在设置await getDoH()之前需要在useEffect()里面做const [initialValues, setInitialValues] = ...

Answer 2

Tbh 我用使用效果做了它，它有自己的一套问题。发现最好的方法是：

const [values, setValues] = useState(async () => {
    const initialState = await getDoH().then(
      (response) => {
        let newValues = switchState;
        let valueArray = Object.entries(newValues).map((v, index) => {
          v[1] = response.data.switchValues[index]
          return v
      });
      newValues = Object.fromEntries(valueArray);
      setValues({...newValues});
      },
      (error) => {
        console.log(error);
      }
    );
    return initialState;
  });

反应：等待承诺

2 个答案: