Arrays Can'；useffect返回语句中的t访问数组

我正在使用useEffect挂钩中的axios在React中获取数据。当我从useEffect钩子中记录数据时，一切正常，但当我尝试在return语句中访问它时，它返回undefined的Cannot read属性“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>

  );

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

TypeError: Cannot read property '0' of undefined

---

它应该是

{data.Con[0]}

当您的组件第一次呈现时，数据可能还不在那里

我的建议是默认情况下将数据设置为

null

，因此更改此行

const[data，setData]=useState（[]）

到

const[data，setData]=useState（null）

然后，在尝试渲染某些内容之前，请检查它是否存在

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

{data？data.Con[0]：null}

如果仍然存在问题，可能需要发布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>

    );
}

import React，{useState，useffect}来自“React”；
从“axios”导入axios
导入“/App.css”；
导出默认函数App（）{
const[data，setData]=useState（）；
useffect（（）=>{
get（'/api/comRes'，{headers:
{“访问控制允许源”：http://localhost:3000/" } 
}).then（功能（数据）{
setData（data.data）；
})
}, []);
返回(
{data？data.Con[0]：null}
);
}
当我尝试{data.Con[0]}时，我得到了相同的结果。-无法访问未定义的属性“Con”。无论使用哪种形式的参数，我都无法从return语句访问数组。它快把我逼疯了！我也尝试过JSON字符串化，但无论我尝试访问哪个wy，它都会给我错误消息。数据在那里，因为我可以使用{JSON.stringify（data）}在中呈现整个数据集，但我无法访问任何项目。@Dan如果您将数据设置为默认值
null
，这样，您就不必在div中添加
三元运算符
，如果数据未更改，则该运算符将为空。@ParthS007，不，if的存在是为了避免调用
.Con
null@ScottGreen，请查看我的更新#1，只需复制此代码并尝试一下。@dancintr更新#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>

    );
}