小编mat*_*ki2的帖子

React useState 钩子未通过 axios 调用更新

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

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

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

我希望得到的数据

[
  {id:1},
  {id:2},
  {id:3},
  {id:4},
]
Run Code Online (Sandbox Code Playgroud)
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)
            })
      };
Run Code Online (Sandbox Code Playgroud)
return(
  <h1>{carouselTitle[1].id}</h1>
)
Run Code Online (Sandbox Code Playgroud)

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

我尝试的第二种方法

    useEffect(() => {
        const fetchData = async () => {
         const res = await axios('api');
         const carouselTitleAlt = await res.data;
         setCarouselTitle({ carouselTitleAlt });
         console.log(carouselTitleAlt);
         console.log(carouselTitle); …
Run Code Online (Sandbox Code Playgroud)

state reactjs axios

2
推荐指数
1
解决办法
40
查看次数

标签 统计

axios ×1

reactjs ×1

state ×1