我可以使用 useState(functionName) 的异步调用吗

Question

学习反应所以请耐心等待...

下面的代码适用于我，并允许我将 valueOne 设置为 OneOneOne

import etc...

function LoadPage()
{
const [valueOne, setvalueOne] = useState(GetValueOne)  

function GetValueOne()
{
   return 'OneOneOne';
}
}

我遇到的问题是我需要调用服务器以在页面加载时返回 valueOne 的实际值...所以我已更改为以下内容：

async function GetValueOne()
{
  let oneResult;

  await axios.get(`${getBaseUrl()}/One/GetValueOfOne`)
  .then(res => {
    oneResult= res.data;
  });

 return oneResult;
}

这现在不起作用，因为我已将函数更改为异步以等待 axios.get 请求...我可以更新 useState 以匹配此吗？

如果没有，请问还有其他方法吗？

Answer 1

在这种情况下您应该使用

useEffect

。

您可以使用内部的一些虚拟值初始化状态

useState

并添加效果来更新状态值

function LoadPage() {
  
  const [valueOne, setValueOne] = useState({})  
  
  useEffect(() => {
  
    async function getValueOne() {
      const oneResult = await axios.get(`${getBaseUrl()}/One/GetValueOfOne`)
      setValueOne(oneResult.data)
    }
    getValueOne()
    
  }, [])
  
}

或者，如果您的项目越来越大

1. 您可以看看一些数据获取/管理库，如 Tanstack Query、SWR 等..
2. 您还可以查看 Redux 等全局状态解决方案以及用于数据获取的 Thunk / Saga 等中间件