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

Question

我已经从数据库中检索到 Recipes组件的数据。现在，我正在尝试将这些数据传递到 RecipeList组件。但是，我只是将项目符号指向 RecipeList组件，并且由于某些原因， RecipesList 仅返回元素“ 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>
    )
}

RecipeList

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

Answer 1

在我看来，这与代码的语法或结构无关，如果它至少呈现标题，则表示一切正常。我建议查看chrome中的react dev工具，并检查组件是否具有应有的所有道具