Javascript 如何在useffect中处理获取的数据

当我尝试处理来自api的数据时，然后使用它进行渲染，但我总是遇到异步问题，因为进程函数不等待我的获取函数

const[fetchData1，setData1]=useState（[]）；
const[fetchData1，setData2]=useState（[]）；
常量[processedData，setProcessedData]=useState（[]）；
useffect（（）=>{
const getData1=async（）=>{
//使用axios获取数据1
//setData1（响应）
}
const getData2=async（）=>{
//使用axios获取数据2
//setData2（响应）
}
getData1（）；
getData2（）；
setProcessedData（processData（fetchData1，fetchData2））；
}, [])
const processData=（数据1、数据2）=>{
//处理两个数据
//返回数据；
}

即使我尝试将两个获取函数和进程函数包装在一个异步函数中，但问题仍然是一样的

（异步（）=>{
等待getData1（）；
等待getData2（）；
setProcessedData（processData（fetchData1，fetchData2））；
})

承诺。所有

都用于处理多个asnyc操作：

以下是更多的例子：

---

承诺。所有

用于处理多个asnyc操作：

以下是更多的例子：

---

阅读您的问题，据我所知，您不需要

fetchData1

和

fetchData2

，您只需要

processedData

。当前代码的问题在于，在调用

setProcessedData

时，它使用的是

fetchData1

和

fetchData2

的默认值，而不是使用axios的结果

等待双方的承诺达成一致，并使用其结果。见评论：

const [processedData, setProcessedData] = useState([]);

useEffect(() => {
    const getData1 = async () => {
        //get data1 using axios
        //setData1(response)
    };
    const getData2 = async () => {
        //get data2 using axios
        //setData2(response)
    };
    // *** Wait for both promises to be fulfilled
    Promise.all(
        getData1(),
        getData2()
    ).then([data1, data2]) => { // Get those results into parameters
        // *** Use the parameter values
        setProcessedData(processData(data1, data2));
    }).catch(error => {
        // handle/report error
    });
}, []);

// *** render using the current values in `processedData`

---

请注意，由于您在第一次创建组件时才执行此操作，因此当组件中的其他状态发生更改时（如果它具有其他状态），您无需担心取消它等问题。如果调用依赖于您在依赖项数组中列出的其他状态数据，那么如果其他数据在调用axios期间发生更改，您可能需要忽略先前的结果。但同样，不是因为你在这里做什么。

阅读你的问题，据我所知，你不需要

fetchData1

和

fetchData2

，你只需要

processedData

。当前代码的问题在于，在调用

setProcessedData

时，它使用的是

fetchData1

和

fetchData2

的默认值，而不是使用axios的结果

等待双方的承诺达成一致，并使用其结果。见评论：

const [processedData, setProcessedData] = useState([]);

useEffect(() => {
    const getData1 = async () => {
        //get data1 using axios
        //setData1(response)
    };
    const getData2 = async () => {
        //get data2 using axios
        //setData2(response)
    };
    // *** Wait for both promises to be fulfilled
    Promise.all(
        getData1(),
        getData2()
    ).then([data1, data2]) => { // Get those results into parameters
        // *** Use the parameter values
        setProcessedData(processData(data1, data2));
    }).catch(error => {
        // handle/report error
    });
}, []);

// *** render using the current values in `processedData`

---

请注意，由于您在第一次创建组件时才执行此操作，因此当组件中的其他状态发生更改时（如果它具有其他状态），您无需担心取消它等问题。如果调用依赖于您在依赖项数组中列出的其他状态数据，那么如果其他数据在调用axios期间发生更改，您可能需要忽略先前的结果。但同样，这与您在这里所做的工作无关。

useffect

与

async

结合起来有点古怪。我建议阅读以下内容：为了准确理解如何使用helper FunctionsOry，我在编辑问题时忘记将processData函数放在setProcessData中。改进问题的语言（代码）这太难阅读了。。

processData

在哪里被称为？？？@Phil-一开始我也没注意到它。：-）它位于对

setProcessedData

的调用中：

setProcessedData（processData（fetchData1，fetchData2））

useffect

与

async

的结合有点古怪。我建议阅读以下内容：为了准确理解如何使用helper FunctionsOry，我在编辑问题时忘记将processData函数放在setProcessData中。改进问题的语言（代码）这太难阅读了。。

processData

在哪里被称为？？？@Phil-一开始我也没注意到它。：-）它位于对

setProcessedData

的调用中：

setProcessedData（processData（fetchData1，fetchData2））。但这不是真正的问题。更多的是在react中使用
useffect
中的helper函数。问题是setProcessedData需要在两个api调用完成后运行。这就是承诺。所有的承诺都是。不完全是承诺。所有的承诺都是同时运行的。在一行中执行两个
await
语句具有相同的效果，但它们是按顺序运行的。但是，我认为问题是它们在
useffect
内部运行，这有其自身的怪癖，但这并不是真正的问题。更多的是在react中使用
useffect
中的helper函数。问题是setProcessedData需要在两个api调用完成后运行。这就是承诺。所有的承诺都是。不完全是承诺。所有的承诺都是同时运行的。在一行中执行两个
await
语句具有相同的效果，但它们是按顺序运行的。但是，我认为问题是它们在
useffect
内部运行，这有它自己的怪癖