axios在React中第一次get request returns undefined

Question

我正在使用 DRF 创建 api.. 我可以使用 axios 获取数据，但第一次 returns 未定义，因此，当我使用 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) 时，它会多次记录它。为什么会这样？正如你在图片中看到的，它记录了多次..

Answer 1

首次呈现时，尚未收到 API 响应。然后，当第二次渲染时，API 收到了反响。

Answer 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;

Answer 3

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

axios在React中第一次get request returns undefined

Axios get request returns undefined for the first time in React

request

reactjs

axios

react-hooks