从response ReactJS获取单个字段

我正在做一个小的尝试和错误反应的实践，对实时新冠病毒19 API数据从

到目前为止，我能够从console.log（response）获取响应，但当我试图获取要显示在div标记上的确认值时，它给了我一个错误。如何从响应中获取各个字段，如恢复、确认、死亡和最后更新？谢谢，下面是代码：

   App.js

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

import socketIOClient from 'socket.io-client'

const ENDPOINT = "http://localhost:4000";

export const App = () => {
  const [response,setResponse] = useState("");


  useEffect(() => {
    const socket = socketIOClient(ENDPOINT);
    socket.on("CovidAPI", data => {setResponse(data);
    });
  }, []);

           return (
              <div style={{textAlign: "center"}}>
               <div>{console.log(response)}</div>
            </div>
          )
        }

    export default App;

App.js
从“React”导入React，{useState，useffect}；
从“socket.io客户端”导入socketIOClient
常量端点=”http://localhost:4000";
导出常量应用=（）=>{
const[response，setResponse]=useState（“”）；
useffect（（）=>{
const socket=socketIOClient（端点）；
socket.on（“CovidAPI”，data=>{setResponse（data）；
});
}, []);
返回(
{console.log（响应）}
)
}
导出默认应用程序；

如果

响应

是具有所需属性的有效对象，则可以显示为

return (
        <div style={{textAlign: "center"}}>
           <div>Recovered: {response.recovered}</div>
        </div>
       )

返回(
已恢复：{response.Recovered}
)

如果响应包含以下数据：

然后你可以这样做：

const [response,setResponse] = useState(null); // <-- make it null for easy validate data


<div>
   {response && response.confirmed.value} // <-- check && display
</div>

const[response，setResponse]=useState（null）；//{
axios.get（）https://covid19.mathdro.id/api）。然后（resp=>{
setresponse（响应数据）
})
},[]);
返回(
回应？
已确认：{响应.已确认.值}

已恢复：{response.Recovered.value}

死亡：{response.death.value}

:
加载。。。
);
}
render（，document.getElementById（'react-root'）