反应 useState 钩子不使用 axios 调用更新

Question

我知道这是一个常见问题，因为我在过去的两个小时里都在检查每个答案并试图更新我的状态，但没有任何效果。

我正在从 cms 获取文本，但是在第一次加载时状态未定义并且我的应用程序崩溃了。但是，如果我注释掉该行，加载页面并取消注释该行会显示正确的值。

这是我尝试过的一些代码。

我希望得到的数据

[
  {id:1},
  {id:2},
  {id:3},
  {id:4},
]

import react, {useEffect, useState} from 'react'
import axios from 'axios'

const [carouselTitle, setCarouselTitle] = useState([])

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


    const fetchData = async () => {
        await axios('api').then(
            response => {
                console.log(response.data)
                setCarouselTitle(response.data)
                console.log(carouselTitle)
            })
      };

return(
  <h1>{carouselTitle[1].id}</h1>
)

控制台记录数据工作正常，但是当我控制台记录状态时它不起作用。

我尝试的第二种方法

    useEffect(() => {
        const fetchData = async () => {
         const res = await axios('api');
         const carouselTitleAlt = await res.data;
         setCarouselTitle({ carouselTitleAlt });
         console.log(carouselTitleAlt);
         console.log(carouselTitle);
       };
       fetchData();
      }, []);

再次控制台记录 useEffect 中的 const 会显示正确的信息，但记录状态不起作用。

感谢您的回复或显示数据的更好方式。

Answer 1

setState 是异步的：https://reactjs.org/docs/faq-state.html#why-doesnt-react-update-thisstate-synchronously

这意味着您不能期望在调用setCarouselTitle 之后的行中控制台记录新的状态值。

要记录新值，您可以使用另一个 useEffect，在依赖项数组中使用 carouselTitle，您可以在其中 console.log(carouselTitle) ：

useEffect(() => {
  console.log(carouselTitle);
}, [carouselTitle]);

也就是说，你的组件应该正确运行，当状态更新时它会被刷新。

在 JSX 中，您应该检查 carouselTitle 是否未定义（意味着请求失败或仍在等待中）：

{carouselTitle && <H1>{carouselTitle[0].id}}

https://reactjs.org/docs/conditional-rendering.html#gatsby-focus-wrapper

Answer 2

首先，如果将初始数据的空数组传递给 useState，则无法在此处获取该数组中的任何项：

return(
  <h1>{carouselTitle[1].id}</h1>
)

因为组件返回的数组的第一项没有任何内容。我更喜欢你这样做：

return(
  <h1>{carouselTitle.length > 0 && carouselTitle[0].id}</h1>
)

并且还基于this 和official documentation，setState（以及使用useState() 的setSomthing()）是异步的。

所以状态数据在设置后不会立即显示。

Answer 3

你应该触发 useEffect 来运行 fetch 函数

useEffect(()=>{fetchData();},[carouselTitle])