Javascript 在react组件中访问对象的属性之前，为什么必须克隆对象？

我从服务器获取了一些数据，并尝试在react元素中使用，但我一直在从undefined读取属性时遇到类型错误

import  React, { useEffect, useState }  from 'react';
import httpService from 'services/httpService';
function PageHighlight() {
  const [highlightItem,sethighlightItem]=useState({});
    async function fetchHighlightItem() {
        const {data}=await httpService.get('/PageHighlights');
        sethighlightItem(data)
    }
    useEffect(()=>{ fetchHighlightItem() },[]);
    console.log(highlightItem.NYCity)
    const item={...highlightItem["NYCity"]};

console.log（highlightItem.NYCity）

的结果已经表明它是一个有效的对象：

但当我试图将它分配给一个变量并访问它时：

const item=highlightItem[“NYCity”]它返回从未定义中读取属性的类型错误。

如果我将其克隆到变量：
constitem={…highlightItem[“NYCity”]}，一切正常，我现在可以访问该属性。为什么？谢谢。
错误来自渲染中的某个地方。我的猜测是，
highlightItem[“NYCity”]
在初始渲染时未定义，因此当您
const item=highlightItem[“NYCity”]
并尝试在渲染中访问类似于
item.foo的内容时，它会抛出错误，但如果将未定义的内容扩展到已定义的对象中，
const item={…highlightItem[“NYCity”}
，现在
item
已定义（
{}
）并且
item.foo
只是返回未定义的。奇怪的是，如果我不尝试将该
highlightItem[“NYCity”]
分配给变量或尝试访问
highlightItem[“NYCity”]
对象，一切都很好。我甚至可以看到console.log（highlightItem[“NYCity”]）显示这是一个成功的对象。它不会引发任何错误。您确定在获取请求完成并更新状态之前没有看到初始空对象（
{}
）状态（嗯，未定义）的两个日志吗？哦，是的，日志窗格确实有两个空对象（
{}
）。现在我知道这是因为在asyn/await函数解析之前，
highlightItem
对象是一个空对象。但让我困惑的是当我使用
console.log（highlightItem[“NYCity]”）时，它可以工作，不需要传播东西？为什么它可以直接在console.log（）函数中使用？thanksConsole日志记录有点异步，因为您可以记录当前为空的对象，如果在将日志缓冲区输出到控制台之前填充了该对象，您将看到一个有效的对象，即使在特定渲染周期的其余代码中，该对象仍然为空。这就是为什么您不应该在功能组件的主体中发出副作用，而是应该在保证每个渲染周期调用一次的效果挂钩中执行任何日志记录。