我可以将异步调用与useState(functionName)[重复]一起使用吗

您可以使用 UseEffect ReactJS中的钩子。您可以使用null值初始化状态,然后在组件首次装载后更新它。

示例代码:

 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();
  }, []); 

在上面的useEffect上,我添加了空的方括号,这意味着useEffect只在组件安装时运行一次。

这里是完整的代码实现:

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;

如果你有任何问题,请告诉我。

你应该使用 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. 您可以查看一些数据获取/管理库,如TanstackQuery、SWR等。。
2. 你还可以看看像Redux这样的全局状态解决方案,以及像Thunk/Saga这样的用于数据获取的中间件