从响应 ReactJS 中获取单个字段答案

【问题标题】：Getting the individual field from response ReactJS从响应 ReactJS 中获取单个字段
【发布时间】：2020-05-18 08:43:53
【问题描述】：

我正在对来自https://covid19.mathdro.id/api 的实时 COVID 19 API 数据进行一些试错反应练习

到目前为止，我能够从 console.log(response) 获得响应，但尽管我试图让确认的值显示在 div 标签上，但它给了我一个错误。如何从响应中获取各个字段，例如恢复、确认、死亡和 lastUpdate？谢谢，代码如下：

   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;

【问题讨论】：

标签： reactjs

【解决方案1】：

如果响应包含这样的数据：https://covid19.mathdro.id/api

然后你可以这样做：

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


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

您可以运行以下代码 sn-p 并查看，希望这能消除您的疑虑：

const { useState , useEffect } = React;

const App = () => {

  const [response,setresponse] = useState(null);

  useEffect(() => {
      axios.get('https://covid19.mathdro.id/api').then(resp => {
         setresponse(resp.data)
      })
  },[]);

  return (
    response ? 
    <div>
      Confirmed : {response.confirmed.value} <br/>
      Recovered : {response.recovered.value} <br/>
      Deaths : {response.deaths.value} <br/>
    </div> :
    <div> Loading ... </div>
  );
}

ReactDOM.render(<App />, document.getElementById('react-root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<div id="react-root"></div>

【讨论】：

【解决方案2】：

如果response 是具有所需属性的有效对象，您可以显示为

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

【讨论】：