Map 獲取數據后渲染組件的數組

Question

TypeError：無法讀取未定義的屬性“地圖”

我收到此錯誤消息，我發現可能是 api 的問題，它比編譯器執行 html 部分慢。

如果我想在獲取數據后渲染組件，我應該怎么做？ 我已經嘗試了很多地方來放置異步 function，但都失敗了。 有沒有辦法解決這個問題？

import React, { useEffect, useState } from 'react'
import api from '../api/index'

function MyAssets() {
    const [assetData, setAssetData] = useState({})


    useEffect(()=>{
        const fetchData = async ()=> {
            const data = await api.getSData()  <-------------! I call the API here
            setAssetData({
                budget: data.data[0].budget,
                assets: data.data[0].assets
            })
        }
        fetchData()
    }, [])

    function AssetRow(props) {
        return (
            <tr>
                <th scope="row">{props.item.symbol}</th>
                <td>{props.item.amount}</td>
                <td>Price</td>
            </tr>
        )
    }

    return (
      {
        assetData.assets.map((item, index) => {        <------! I try to map an array here
          return <AssetRow key={index} item={item} />;
        }
      }
    )
}

Answer 1

渲染階段在所有效果之前調用。 所以在第一次渲染中（當MyAssets組件被安裝時）assetData 有{}作為值，所以沒有assets屬性可以訪問並且是未定義的。

嘗試使用默認值初始化，例如

const [assetData, setAssetData] = useState({ assets: [] })