我在一個訓練營專案的前端作業，在將物件陣列傳遞給子組件時遇到問題。
現在，我正在創建一個變數陣列來測驗組件。當在父組件的陣列上使用映射時它作業正常，但是當將陣列傳遞給子組件然后在其上使用映射函式時我得到一個錯誤：arr.map 不是一個函式。
父組件：
import React from 'react'
import BottomNav from '../components/BottomNav'
import RecipeListContainer from '../components/RecipeListContainer'
const UserHome = () => {
let recipeSample = [{id: 1,title: "Crispy pork belly lechon", category: "Filipino classics", author:"Alex"}, {id: 2,title: "Beef brocolli with scallions", category: "Chinese classics", author:"Wu Han"}];
return (
<div>
<RecipeListContainer title="Featured recipes" recipeSample={recipeSample}/>
<BottomNav selected="explore"/>
</div>
)
}
export default UserHome
子組件
import React from 'react'
import classes from './recipeListContainer.module.scss'
const RecipeListContainer = (title, recipeSample) => {
return (
<div className={classes.container}>
<h1 className={classes.listTitle}>{title}</h1>
{recipeSample.map((recipe) => (
<div key={recipe.id} className={classes.recipeCard}>
<div className={classes.recipeImage}></div>
<div className={classes.recipeDescription}>
<h4>{recipe.title}</h4>
<p>{recipe.category}</p>
<p>Created by : {recipe.author}</p>
<button type="button">Remove from menu</button>
</div>
</div>
))}
</div>
)
}
export default RecipeListContainer
我不確定我做錯了什么，與類似功能（來自不同專案）的作業版本相比，我似乎沒有遺漏任何東西。
uj5u.com熱心網友回復：
需要分解道具。改變這個
const RecipeListContainer = (title, recipeSample) => {
至
const RecipeListContainer = ({title, recipeSample}) => {
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/536982.html