Javascript 在获取数据后映射数组以渲染组件

TypeError:无法读取未定义的属性“map”

我收到了这个错误消息，我发现这可能是api的问题，它比编译器执行html部分要慢

如果我想在获取数据后渲染组件，我应该如何做？我尝试了很多地方来放置异步函数，但都失败了。有没有办法解决这个问题

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} />;
        }
      }
    )
}

import React，{useffect，useState}来自“React”
从“../api/index”导入api
功能MyAssets（）{
常量[assetData，setAssetData]=useState（{}）
useffect（（）=>{
const fetchData=async（）=>{
const data=await api.getSData（）{在所有效果之前调用渲染阶段。因此，在第一次渲染中（当装入MyAssets组件时），assetData将{}作为值，因此没有要访问的assets属性，并且未定义

尝试使用默认值初始化，如

const[assetData，setAssetData]=useState（{assets:[]}）
在所有效果之前调用渲染阶段。因此，在第一次渲染中（当MyAssets组件装入时），assetData将{}作为值，因此没有要访问的assets属性，并且未定义

尝试使用默认值初始化，如

const[assetData，setAssetData]=useState（{assets:[]}）
您确定
data.data[0].assets
是一个数组吗？您可以尝试
assetData&&assetData.assets.map
您是否尝试过分离fetchData函数（不包括setAssetData）部分，以便它返回一个对象
{budget:…，assets:…}
，然后在
常量[assetData，setAssetData]=useState（fetchData（））
中调用该函数？这样，您将把结果作为assetData的初始状态（并且由于您只在初始渲染时调用useEffect），您确定
数据[0].assets
是数组吗？您可以尝试
assetData&&assetData.assets.map
您是否尝试过分离fetchData函数（不包括setAssetData）部分，以便它返回一个对象
{budget:…，assets:…}
，然后在
常量[assetData，setAssetData]=useState（fetchData（））内调用该函数
？这样，您就可以将结果作为assetData的初始状态（并且因为您只在初始渲染时调用useEffect）