多轴使用中

问题描述

我正在尝试将useEffect与多个axios请求一起使用。这是我的代码：

const [data,setData] = useState('');
const [popularCategories,setPopularCategories] = useState('');

useEffect(() => {
    (async () => {
        const result = await axios
            .get("http://example.com/api/v1/api1")
            .catch((err) => {
                console.error(err);
            });

        await setData(result.data);

        const resultCategories = await axios
        .get("http://example.com/api/v1/api2")
        .catch((err) => {
            console.error(err);
        });
        await setPopularCategories(resultCategories.data);
        
    })();
},[]);


return (
    <div>
        {data}
        {popularCategories}
    </div>
);

当我尝试使用它们时，它会打印data，但不会打印popularCategories。我不明白为什么我可以使用数据而不使用popularCategories我已经检查过三次 http://example.com/api/v1/api2 返回一个字符串。 我在哪里失踪？

其他：此页面是我的索引页面。我已将域直接路由到这里。

编辑：真正的变量名是PopularCategories。问题仍然存在。

编辑2 ：我已经意识到，当我删除数据并仅运行热门类别时，就会发现。问题仍然存在。大约是API响应时间吗？另外，我已经consol记录了它。它打印4次。首先，它没有给出前两个打印值，而给出了最后两个打印值。

解决方法

首先，将await与setState一起使用是没有意义的-它不会返回promise，而是在毫无意义地等待它们。 似乎您在返回中弄乱了州名：

return (
    <div>
        {data}
        {resultCategories} // should it be popularCategories ?
    </div>
);

,

我觉得您需要在第二个参数中指定状态对象。状态更改时，dom似乎不再呈现。

尝试以下

const [data,setData] = useState('');
const [popularCategories,setPopularCategories] = useState('');

useEffect(() => {
    (async () => {
        const result = await axios
            .get("http://example.com/api/v1/api1")
            .catch((err) => {
                console.error(err);
            });

        await setData(result.data);

        const resultCategories = await axios
        .get("http://example.com/api/v1/api2")
        .catch((err) => {
            console.error(err);
        });
        await setPopularCategories(resultCategories.data);
        
    })();
},[data,popularCategories]); //specified this


return (
    <div>
        {data}
        {popularCategories}
    </div>
);