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

我正在从 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 显示正确的信息，但记录状态不起作用。

感谢您的回答或显示数据的更好方法。

回答

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

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