Reactjs 数组对象在硬编码数据时工作，但在从节点js填充数据以响应js时不工作

我在react Js中有一个数组对象，当我在react Js中硬编码数据并执行它时，从节点Js发送的相同数据和react Js中的相同数据不会显示出来

请查看代码沙盒链接，我的代码正在运行

import React，{useState}来自“React”；
从“react dom”导入react dom；
从“react bootstrap”导入{Carousel}；
导入“bootstrap/dist/css/bootstrap.css”；
导入“/styles.css”；
函数App（）{
const[eventList，setEventList]=useState([{
eventName:'Sankranti'，
事件日期：“2021-01-21T00:00:00.000Z”，
商品信息：“tp012345”
},
{
eventName:'Sankranti 1'，
事件日期：“2021-01-26T00:00:00.000Z”，
商品信息：“tp012345”
}])
const eventListRender=eventList.length>0？
eventList.map（（项，索引）=>{
返回{item.eventName}
}) :
没有即将举行的活动
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
{eventListRender}
);
}
const rootElement=document.getElementById（“根”）；
render（
不要有条件地在上使用钩子。

请改为在下面使用

            useEffect(() => {
             if(!props.profileData) {
                (async () => {
                    const eventsList = await axios.get(
                        "http://localhost:3000/api/dashboard"
                    );
                        console.log(eventsList.data)
                        const response = eventsList.data
                        setEventList(eventList => [...eventList, ...response])
                        if(!response){
                            setErrorMsg('Please create Event and then add User !!')
                        }
                })();
            }
            }, [props.profileData]);
        }

看起来问题出在.map逻辑上

 const eventListRender = eventList.length > 0 ?
                          eventList.map((item) => { 
                              console.log('item: ', item)
                              console.log('item event name: ', item.eventName)
                          return <Carousel.Item>{item.eventName}</Carousel.Item>
                          }) :
                          <Carousel.Item>No upcoming events</Carousel.Item>

const eventListRender=eventList.length>0？
eventList.map（（项）=>{
console.log（'item:'，item）
console.log（'item event name:'，item.eventName）
返回{item.eventName}
}) :
没有即将举行的活动

您还需要传播API结果，因为它是一个数组：

setEventList（eventList=>[…eventList，…response]）
当您硬编码数据时，检索是同步的。当您使用异步函数时，检索是异步的，因此存在一个点，
item
为空。item有数据。请查找更新的控制台结果。当我们尝试读取item.eventName时，它返回undefined.read不工作仍然是相同的结果您确定
props.profileDa吗ta
null或未定义？是的，它是null。您的
item
有一个数组，因此如果您尝试
console.log（'item event name:'，item[0].eventName）
它应该记录。所以在添加item[0]之后，您也需要传播API响应
setEventList（eventList=>[…eventList，…response]）
。eventName它收到了此错误。取消捕获（承诺中）TypeError:无法读取未定义的属性“eventName”
XXXX if (!props.profileData) { XXXX
        useEffect(() => {
            (async () => {
                const eventsList = await axios.get(
                    "http://localhost:3000/api/dashboard"
                );
                    console.log(eventsList.data)
                    const response = eventsList.data
                    setEventList(eventList => [...eventList, ...response])
                    if(!response){
                        setErrorMsg('Please create Event and then add User !!')
                    }
            })();
        }, []);
    }

            useEffect(() => {
             if(!props.profileData) {
                (async () => {
                    const eventsList = await axios.get(
                        "http://localhost:3000/api/dashboard"
                    );
                        console.log(eventsList.data)
                        const response = eventsList.data
                        setEventList(eventList => [...eventList, ...response])
                        if(!response){
                            setErrorMsg('Please create Event and then add User !!')
                        }
                })();
            }
            }, [props.profileData]);
        }

 const eventListRender = eventList.length > 0 ?
                          eventList.map((item) => { 
                              console.log('item: ', item)
                              console.log('item event name: ', item.eventName)
                          return <Carousel.Item>{item.eventName}</Carousel.Item>
                          }) :
                          <Carousel.Item>No upcoming events</Carousel.Item>