时间戳

首页 > 解决方案 > 如何等待来自嵌套请求的 React 评估值？

reactjs - 如何等待来自嵌套请求的 React 评估值？

问题描述

我遇到了 React 没有等待评估值的问题。我在 useEffect 中有大约 10 个 GET 请求，然后将其置于挂钩状态：

const [data,setData]=useState()
    useEffect(async()=>{
     //here axios requests
     setData('here retrieved data above');
    },[]);

我包装了异步函数，但它没有帮助，我的反应代码在没有来自 axios 请求的数据的情况下开始，但在控制台我看到来自每个请求的数据，标记为“刚刚评估了下面的值”。我怎么能等待评估？据我了解它与变异对象有关 - https://www.freecodecamp.org/news/mutating-objects-what-will-be-logged-in-the-console-ffb24e241e07/ 但不明白如何解决它

我的代码：

const SmallGrid = (props)=>{
    return <div>
            <h1>{props.name}</h1>
            {props.elements && props.elements.map((el, idx)=>{
                return <Link to={`${el.url.split("http://swapi.dev/api")[1].slice(0, -1)}`} className={styles.links}>{el.name}</Link>
            })}
          </div> 
};

function UniPage({match}) {
    const[data, setData] = useState({});
const getData = async () => {
    try {
        const firstData = await axios.get(`https://swapi.dev/api${match.url}`);
        console.log(firstData.data);
        let addData = {};
        await Promise.all(
            Object.keys(firstData.data).map((key)=>{
                if(Array.isArray(firstData.data[key])){
                    let tempArray = [];
                    firstData.data[key].map((url)=>{
                        axios.get(url)
                        .then((data)=>{
                            tempArray.push(data.data)
                        })
                    });
                    addData[key] = tempArray;
                }
            })
        ).then(result=>{
            console.log(addData);
            setData(Object.assign(firstData.data,addData));
        })
    } catch (err ) {
        // errors
        console.log(err,"connection error")
    }
}

useEffect(() => {
    getData()
}, []);

使用此代码，我从嵌套请求中丢失了部分数据，并将其像评估值一样在控制台中获取。

标签： reactjsreact-reduxreact-routerreact-router-dom

解决方案

不幸的是，useEffect不能等待承诺解决。这是因为，在 React 中，效果挂钩期望传递给它的函数返回的值是一个清理函数。因此，将异步函数交给它会导致返回Promise被解释为这样。

一个典型的解决方法是使用Promise.prototype.then()（以下概述为策略 A）。

另一种解决方案是将所有异步逻辑转移到可以等待的单独函数中（以下概述为策略 B）。这往往是首选，因为它允许有机会通过函数名称暗示正在发生的事情并导致更整洁的代码。

请参阅下面的实际示例。

// State.
const [data, setData] = useState()

// Did Mount.
useEffect(() => {
  
  // Strategy A.
  axios.get('/endpoint').then(response => setData(response.data))

  // Strategy B.
  const fetchData = async () => {
    const {data} = await axios.get('/endpoint')
    setData(data)
  }
  fetchData()

}, [])

推荐阅读