如何使用react钩子在组件之间传递道具

我已经从数据库中检索到配方组件的数据。现在,我试图将这些数据传递到RecipeList组件中。但是,我只是将项目符号指向RecipeList组件,由于某种原因,Recipes组件仅返回元素“ title = {recipe.title}” 我只是开始编程。如果有人可以帮助我,我会很高兴。

菜谱

import React, {useState, useEffect} from 'react'
import axios from 'axios'

import RecipeList from '../pages/espaceUser/RecipeList'

export default function Recipes(props) {

    const [recipes, setRecipes] = useState([])

    const [test] = useState("text")




    useEffect(() => {

        const id = props.match.params.id

        const getRecipes = async () => {
            const url = `http://localhost:8000/user/recipes/${id}`  
            const result = await axios.get(url)

                setRecipes(result.data)
                console.log('test', result.data);
            }


            getRecipes()

    },[])

    return (

        <div>


            {recipes.map(recipe => (
            <RecipeList
            key={recipe.id}
            title={recipe.title}
            materiel={recipe.materiel}
            ingredient={recipe.ingredient}/>

            ))}

        </div>
    )
}

配方清单

import React from 'react'

export default function RecipeList(props) {
    return (
        <div>
            <ul>
                <li>{props.title}</li>
                <li>{props.materiel}</li>
                <li>{props.ingredient}</li>
            </ul>
        </div>
    )
}
评论