开发者问题收集

即使我使用异步代码，Axios get 调用也会返回未定义

2022-06-26
104
reactjs axios

对于这段代码： 

import { useEffect, useState } from 'react';

import 'ag-grid-community/dist/styles/ag-grid.min.css';
import 'ag-grid-community/dist/styles/ag-theme-material.min.css';
import Grid from '../Common/Grid';
import axios from 'axios';

function GetJudete() {
  axios.get("http://localhost:5266/api/judete").then((response) =>
  {
    let data = response.data;
    return data;
  } 
  ).catch(err => {
    console.log("Eroare la aducerea datelor.");      
  })
};

function Localitati()
{
  let judete;
  useEffect(() => {
    judete = GetJudete();
  }, []);
  console.log(judete);
  
  const [columnDefs] = useState([
    { field: 'nume', filter: 'agTextColumnFilter', editable: true },
    { field: 'judetID', filter: 'agTextColumnFilter', editable: true },
  ])
  return (
    <Grid 
    baseLink='http://localhost:5266/api/localitati'
    columnDefs={columnDefs}
    />
  );
}

export default Localitati;

我的 console.log() 打印未定义。我期望它填充值，因为我在 GetJudete() 中使用了异步代码，方法是使用 Promises 。

但我发现它不能这样工作。

为什么以及我该如何修复此问题？

谢谢。

3个回答

您看到 undefined 有两个主要原因：

  1. useEffect 中的代码在渲染后运行。这就是为什么对 judete 的任何更新都会在您已记录它之后发生的原因。（一旦正确设置，您需要触发重新渲染才能看到第二行日志。）

  2. 您的 GetJudete 函数没有返回任何内容，这就是为什么您仍然会得到 undefined 的原因。（您的承诺确实返回了某些内容，但从未在任何地方使用过。）

以下是解决这两个问题的方法： 

import { useEffect, useState } from 'react';

import 'ag-grid-community/dist/styles/ag-grid.min.css';
import 'ag-grid-community/dist/styles/ag-theme-material.min.css';
import Grid from '../Common/Grid';
import axios from 'axios';

async function GetJudete() {
    try {
        const { data } = await axios.get("http://localhost:5266/api/judete");
        return data;
    } catch (_) {
        console.log("Eroare la aducerea datelor.");      
    }
};

function Localitati()
{
  // Use a state instead of a local variable, so that React knows about updates
  const [judete, setJudete] = useState();

  useEffect(() => {
    async function getJudeteAsync() {
      const result = await GetJudete();
      setJudete(result);
    }
    // Trigger the async function from your effect
    getJudeteAsync();
  }, []);

  // The first render will yield "undefined";
  // once the AJAX call is successfully done, the setJudete above will cause a re-render and you should see a second log line with an actual value
  console.log(judete);
  
  const [columnDefs] = useState([
    { field: 'nume', filter: 'agTextColumnFilter', editable: true },
    { field: 'judetID', filter: 'agTextColumnFilter', editable: true },
  ])
  return (
    <Grid 
    baseLink='http://localhost:5266/api/localitati'
    columnDefs={columnDefs}
    />
  );
}

export default Localitati;
digitalbreed
2022-06-26

尝试一下 

async function getJudate(){
    await axios.get(...).then(...)
}

useEffect(() => {
    let judate = getJudate()
    console.log(judate)
}, [])
Mahmoud Ibrahiam
2022-06-26

您需要在解析后将数据发送到 console.log。

在当前代码中，您在创建组件时打印 judetes。要修复您的问题，您应该在 .then 中调用 console.log，因为它在创建组件后一段时间才解析。

PM75902693
2022-06-26