將 JSON 子內容顯示到 Reactjs 中的 HTML 表

Question

伙計們，我知道這已經問了很多次了，但我仍然不知道如何解決我的問題。 所以我想要做的是顯示一些嵌套的 JSON 數據到 HTML 表。

所以這是我拿到的 JSON。

這是我的 reactjs 代碼：

 var [infectionData, setInfectionData] = useState({
    response: []

  });

 var [isLoaded, setLoaded] = useState(false);

 useEffect(() => {

    var fetchData = async () => {
        var url = "https://api.covid19api.com/summary";

        var result = await axios.get(url);
        var response = result.data

        response = Array(response);

        setInfectionData({ response: response });

        console.log(infectionData.response);

    }

    fetchData();
    setLoaded(true);

});

這是 HTML 表：

            <Table bordered hover className="mt-3 w-75">
                <thead>
                    <tr>
                        <th>Country</th>
                        <th>Total Infection</th>
                        <th>New Deaths</th>
                    </tr>
                </thead>
                <tbody>
                    {
                        infectionData.response.Countries.map((item) => (
                            <tr>
                                <td>{item.Country}</td>
                                <td>{item.TotalConfirmed}</td>
                                <td>{item.NewDeaths}</td>
                            </tr>


                        ))
                    } 
                </tbody>

            </Table>

知道如何解決這個問題嗎？

Answer 1

你可以試試這個

    infectionData.response.Countries && infectionData.response[0].Countries.map((item) => (
                        <tr>
                            <td>{item.Country}</td>
                            <td>{item.TotalConfirmed}</td>
                            <td>{item.NewDeaths}</td>
                        </tr>


                    ))

Answer 2

這是Array構造函數https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Array

response = Array(response); 刪除這條線，一切都會好起來的。

或者

infectionData.response[0].Countries.map((item) => (
                        <tr>
                            <td>{item.Country}</td>
                            <td>{item.TotalConfirmed}</td>
                            <td>{item.NewDeaths}</td>
                        </tr>


                    ))