代码之家  ›  专栏  ›  技术社区  ›  John

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

  •  1
  • John  · 技术社区  · 1 年前

    学习反应,所以请耐心。。。

    下面的代码对我有效,允许我将valueOne设置为OneOneOne

    import react from "React";
    
    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以匹配此项吗?

    如果没有,请问还有其他方法吗?

    2 回复  |  直到 1 年前
        1
  •  1
  •   Maulik Patel    1 年前

    您可以使用 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;
    

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

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