React - 如何使用 hook useState 道具創建一個 map function

Question

我正在嘗試使用道具創建一個 map，但它顯示此錯誤：

類型錯誤：data.map 不是 function

下面是主頁的代碼：

const Portfolio = () => {
  
  const [portfolio_assets, setPortfolioAssets] = useState([]);
  const auth = useContext(AuthContext);
  const onFetchPortfolioAssets = useCallback(async () => {
      const json = await fetchPortfolioAssets(auth.token);
      if (json) {
          setPortfolioAssets(json);
      }
      }, [auth.token]);
      useEffect(() => {
      onFetchPortfolioAssets();
      }, [onFetchPortfolioAssets]);

  return (
    <MainLayout>
       <Dashboard data={portfolio_assets} />
    </MainLayout>
  )
};

export default Portfolio;

這是帶有儀表板的頁面：

const Dashboard = (data=[]) => {
    console.log(data)
    
    return (
        <Row>
            <table className='table table-striped'>
                <tr>
                    <th>Category</th>
                </tr>
                {data.map((portfolio_asset) => (
                <tr key={portfolio_asset.id} lg={12}>
                    <td>{portfolio_asset.category}</td>                    
                </tr>
                ))}
            </table>
        </Row>
  )
};

export default Dashboard;

這是console.log，所以object就在那里，但我不明白怎么用。map

{data: Array(0)}data: [][[Prototype]]: Object

{
    "data": [
        {
            "id": 1,
            "category": "Category 1",
        },
        {
            "id": 2,
            "category": "Category 2",
        },
        {
            "id": 3,
            "category": "Category 2",
        },
    ]
}

Answer 1

您在 Dashboard 中獲取數據 object 時犯了一個錯誤。 您獲得的參數包含所有道具，而不僅僅是數據，因此您必須將其替換為：

const Dashboard = ({data=[]}) => {

用 {} 圍繞數據從道具 object 獲取數據