从响应ReactJS获取单个字段

I am doing a little trial and error react practice on a real-time COVID 19 API data from https://covid19.mathdro.id/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;
评论
  • uid
    uid 回复

    If response is valid object with required properties you can display as

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

  • 别犯贱
    别犯贱 回复

    If the response contains data as this : 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>