Javascript 为什么异步等待在react中的使用效果不好

我正在尝试获取用户位置，然后使用该位置返回is位置的相关数据

但是在第二个函数中，我得到的位置是空的（当i console.log（location）打印正确的位置时，在第二次打印时，第一次打印是空的），第二个函数似乎没有等待第一次打印完成

下面是一些代码：

来自组件

    const location = useSelector(state => state.locationReducer.location);
    useEffect(()=> {
        (async () => {
            await getLocation();

            // here i'm using the location from the first function
            await getInfo(location);
        })()
    }, []);


    const getLocation = async() => {
        try {
            await dispatch(getLocation());
            console.log(location);
        } catch (err) {
            // TODO HANDLE ERROR;
            console.log('Err:', err);
        }
    }

在行动中

export const getLocation = locationName => {
    return async dispatch => {
        try {
            const location = **await** locationService.getLocation(locationName);
            **await** dispatch(setLocation(location));
        } catch (err) {
            throw err;
        };
    };
};

const setLocation = location => {
    return {
        type: types.SET_LOCATION,
        location
    };
};

在用

async function getLocation(locationName) {
    try {]
        return **await** axios.get(`${url}/${locationName}`);
    } catch (err) {
        throw err
    };
};

---

选择器中的

location

值在第一个函数运行后和第二个函数运行前不会更新，因此您将在

location

变量中看到旧值

您可能需要从减速器返回位置值：

export const getLocation=locationName=>{
返回异步调度=>{
试一试{
const location=await locationService.getLocation（locationName）；
等待调度（设置位置（位置））；
返回位置；
}捕捉（错误）{
犯错误；
};
};
};

并在

useffect

中使用返回的位置：

useffect（（）=>{
（异步（）=>{
const location=等待getLocation（）；
//这里我使用第一个函数中的位置
等待获取信息（位置）；
})()
}, []);

或另一种可能性，以产生另一种效果，取决于位置值：

    const location = useSelector(state => state.locationReducer.location);
    useEffect(()=> {
        getLocation();
    }, []);

    useEffect(()=> {
      if(location) {
        getInfo(location);
      }
    }, [location]);

这将在每次位置改变时运行，并且位置有一定的价值。

根据丹·阿布拉莫夫的说法-

useEffect(() => {
async function fetchMyAPI() {
let url = 'http://something';
let config = {};
const response = await myFetch(url);
console.log(response);}  
fetchMyAPI();
}, []);

以下是供参考的链接-

或者您可以简单地使用.then（）

---

关于如何在组件中获取-

的文章您是否尝试使用

调度

？有一个

useDispatch

钩子，您可以从witch获得一个分派实例，在useffect中，您的操作需要包装在分派调用中，如：

wait dispatch（getLocation（））

；我正在使用dispatch，下面是来自组件

const getLocation=async（）=>{try{await dispatch（getLocation（））；console.log（location）；}catch（err）{console.log（'err:'，err）；}}

谢谢！两个都在工作！这其中哪一个选项是最佳实践？这取决于，我想说第二个选项在react redux应用程序中更惯用，但在这种情况下，第二个效果（使用

getInfo

）将在每次位置更改时运行，这可能是好的（因为如果位置更新，信息将更新），但是，根据您对组件逻辑的要求，这可能是不好的。因此，如果我将getLocation放在App.js中，并将sec函数-getInfo（location）放在具有useEffect的组件中，它将在每次位置更改时重新呈现组件，这是惯用方法吗？还是良好实践？对这样的更改做出反应是惯用的，但如果在应用程序中，您的要求是不能仅在第一次渲染时调用getInfo，那么第一种方法是：）

useEffect(() => {
asyncCall().then(setVal);
})