Axios get request 在 React 中第一次返回 undefined

Posted 2023-02-22

【中文标题】Axios get request 在 React 中第一次返回 undefined

【英文标题】：Axios get request returns undefined for the first time in React

【发布时间】：2021-09-30 09:24:10

【问题描述】：

我正在使用 DRF 创建 api。我可以使用 axios 获取数据，但它第一次返回未定义，因此，当我使用 useState 时，它被设置为未定义。

ItemDetail.js：

import React,  useState, useEffect  from 'react'
import axios from 'axios'
const ItemDetail = () => 


    const [detail, setDetail] = useState('')

    const [id, setId] = useState('')



    const RecipeDetail = async () => 

        const res = await axios(
            method: 'get',
            url: `http://127.0.0.1:8000/api/recipe-detail/1`,
            headers: 
                'Content-Type': 'application/json;charset=UTF-8',
                "Access-Control-Allow-Origin": "*",
            

        )

        setDetail(res.data)

    

    useEffect(() => 
        RecipeDetail()

    , [id])

    console.log(`Hi $detail`)


    return (
        <div>
            Hi
        </div>

    )


export default ItemDetail

那么为什么 API 第一次返回 undefined 呢？ 我读了一些关于我拥有的 async/await 使用的答案。另外，当我console.log(detail) 时，它会多次记录它。为什么会这样？ 正如您在图像中看到的，它记录了多次..

【参考方案1】：

首次渲染时，尚未收到 API 响应。 然后，当第二次渲染时，API 响应被接收。

【讨论】：

我明白了.. 我该如何纠正它？我不希望 undefined 作为一个值存储在我的state.. 另外，如果你能回答整个问题

【参考方案2】：

import React,  useState, useEffect  from 'react';
import axios from 'axios';

const ItemDetail = () => 
  const [detail, setDetail] = useState('');

  const RecipeDetail = async () => 
    const res = await axios(
      method: 'get',
      url: 'http://127.0.0.1:8000/api/recipe-detail/1',
      headers: 
        'Content-Type': 'application/json;charset=UTF-8',
        'Access-Control-Allow-Origin': '*',
      ,

    );

    setDetail(res.data);
  ;

  useEffect(() => 
    RecipeDetail();
  , [detail]);

  console.log(`Hi $detail`);

  return (
    <div>
      detail ? 'Hi' : 'Loading ... '
    </div>

  );
;

export default ItemDetail;

【参考方案3】：

您正在尝试在设置之前访问或记录详细信息，这意味着将在您的内容呈现后调用 useEffect 因此 console.log(Hi $detail);先运行并记录未定义，然后运行 ​​useEffect 和 RecipeDetail();当您调用 setState 时，数据接收状态发生了变化。并且重新渲染再次发生，这次你收到了价值。

【讨论】：

如果您觉得这个问题有用，请点赞