Javascript 是否可以将异步调用与useState(UnctionName)一起使用

发布于02月07日

学习的react ，所以请忍耐…

下面的代码适用于我，并允许我将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;
}

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

如果没有的话，有没有别的办法呢？

推荐答案

您可以在ReactJS中使用UseEffect钩子来实现这一点.您可以使用空值初始化状态，然后在组件首次挂载后对其进行更新.

Sample code:个

 const [valueOne, setValueOne] = useState(null);
  
    useEffect(() => {
    async function fetchData() {
      try {
        const response = await axios.get(`${getBaseUrl()}/One/GetValueOfOne`);
        setValueOne(response.data);
      } catch (error) {
        console.error('Error fetching valueOne:', error);
      }
    }

    fetchData();
  }, []);

在上面的Use Effect中，我添加了空方括号，这意味着Use Effect只在组件挂载时运行一次.

Here, is full code implementation:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function LoadPage() {
  const [valueOne, setValueOne] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await axios.get(`${getBaseUrl()}/One/GetValueOfOne`);
        setValueOne(response.data);
      } catch (error) {
        console.error('Error fetching valueOne:', error);
      }
    }

    fetchData();
  }, []); // Empty dependency array to only run once on mount

  return (
    <div>
      <h1>Value of valueOne: {valueOne}</h1>
    </div>
  );
}

export default LoadPage;

如果你有任何问题，请告诉我.