无法在 UseEffect return 语句中访问 Array

Question

我正在使用 axios 在 useEffect 挂钩中获取 React 中的数据。当我从 useEffect 挂钩中控制台记录数据时，一切都很好，但是当我尝试在 return 语句中访问它时，它返回无法读取未定义的属性“Con”。

这是我的代码：

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

export default function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get('/api/comRes', {headers:{"Access-Control-Allow-Origin": "http://localhost:3000/"}})
  .then(function (data) {

    setData(data.data);
console.log(data.data.Con[0])

   })}, []);

  return (

    <div className="grid-container">
    <div className="menu"></div>
  <div className="dashboard">{data.data.Con[0]}</div>
  </div>

  );

这是整个数据集的 console.log：

{_id: "5e85c1241c9d440000e730c7", Con: Array(30), Lab: Array(30), LibDem: Array(30), Other: Array(30), …}
_id: "5e85c1241c9d440000e730c7"
Con: (30) [47, 50, 44, 33, 35, 41, 43, 54, 63, 34, 42, 59, 49, 48, 52, 39, 39, 45, 32, 39, 49, 43, 37, 47, 50, 46, 57, 45, 57, 56]
Lab: (30) [31, 28, 34, 47, 42, 33, 35, 23, 19, 44, 34, 21, 28, 29, 34, 36, 39, 31, 11, 29, 33, 45, 52, 41, 30, 38, 28, 29, 25, 22]
LibDem: (30) [9, 9, 10, 9, 11, 11, 8, 8, 9, 10, 9, 9, 14, 9, 4, 8, 8, 10, 6, 5, 10, 8, 5, 7, 11, 7, 9, 14, 11, 14]
Other: (30) [0, 1, 0, 1, 1, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 0, 1, 1, 1, 1, 0]
Brexit: (30) [3, 3, 2, 0, 3, 2, 4, 3, 1, 2, 3, 2, 1, 2, 4, 4, 2, 4, 1, 4, 3, 3, 2, 2, 5, 3, 2, 4, 1, 3]
Green: (30) [4, 4, 4, 6, 3, 5, 5, 5, 2, 4, 5, 3, 4, 4, 3, 4, 4, 5, 3, 1, 4, 2, 3, 3, 4, 5, 4, 8, 4, 5]
SNP: (30) [4, 5, 4, 4, 4, 8, 3, 6, 3, 4, 5, 4, 3, 4, 4, 6, 6, 3, 47, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
Plaid: (30) [1, 1, 1, 0, 1, 1, 1, 2, 1, 1, 1, 2, 0, 2, 0, 1, 2, 1, 0, 22, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
Date: "20/02/2020"
__proto__: Object

这是我尝试从 return 语句访问 {Data.Con[0]} 时的错误报告：

TypeError: Cannot read property '0' of undefined

Answer 1

当你的组件第一次渲染时，数据可能还没有。

我的建议是默认将数据设置为null，因此更改此行

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

到

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

然后，在尝试渲染某些东西之前，检查它是否存在

<div className="dashboard">{data ? data.Con[0] : null }</div>

如果您仍然有问题，您可能需要发布 axios 的响应数据结构。

更新 #1

import React, { useState, useEffect } from "react";

import axios from 'axios'
import './App.css';

export default function App() {
    const [data, setData] = useState();

    useEffect(() => {
        axios.get('/api/comRes', { headers: 
            { "Access-Control-Allow-Origin": "http://localhost:3000/" } 
        }).then(function (data) {
                setData(data.data);
            })
    }, []);

    return (
        <div className="grid-container">
            <div className="menu"></div>
            <div className="dashboard">{data ? data.Con[0] : null}</div>
        </div>

    );
}