React：使用异步函数获取未定义答案

【问题标题】：React: Getting undefined using async functionReact：使用异步函数获取未定义
【发布时间】：2021-02-02 19:57:31
【问题描述】：

我把最后一个问题作为重复问题关闭了...我显然在使用 async/await

我正在尝试从 api 获取数据并将其传递给 state，company 是对象数组，我在 <p>{companies ? console.log(companies[0].id) : ""}</p> 处收到未定义 id 的错误，我不知道为什么

import './App.css';
import React, { useState, useEffect } from "react";
import Navigation from './Components/Navigation'
import axios from 'axios'


const App = () => {


  const [companies, setData] = useState({});

  async function fetchData() {
    const urlcompanies = "http://localhost:8000/data-companies/";
    const response = await fetch(urlcompanies);
    const data = await response.json();
    setData(data)  
  }

  useEffect(() => {
   fetchData(); 
  }, [])

  
    

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
         <p>{companies ? console.log(companies[0].id) : ""}</p>
         <Navigation companydata = {companies} /> 
        <a
        
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

【问题讨论】：

标签： reactjs ecmascript-6

【解决方案1】：

改变这个

const [companies, setData] = useState({});

到

const [companies, setData] = useState(null);

否则，在第一次渲染时，您会尝试访问您认为将是一个数组的第一个元素，直到您调用该异步函数之后才会设置它。

这个

{companies ? console.log(companies[0].id) : ""}

将在第一次渲染时打印""，然后，将companies 变量设置为实际数组后，您将看到第一个元素的ID。

【讨论】：

【解决方案2】：

试试：

const [companies, setData] = useState()

而不是

const [companies, setData] = useState({})

【讨论】：

请解释为什么此更改可能会改善 OP 的结果。

【解决方案3】：

更新初始状态

const [companies, setData] = useState({});

到

const [companies, setData] = useState([]);

然后改变这个

<p>{companies ? console.log(companies[0].id) : ""}</p>

到这里

<p>{companies.length ? console.log(companies[0].id) : ""}</p>

【讨论】：