时间戳

首页 > 解决方案 > 如何使用反应钩子在组件之间传递道具

javascript - 如何使用反应钩子在组件之间传递道具

问题描述

我已将数据库中的数据检索到Recipes 组件。现在，我正在尝试将这些数据传递到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>
    )
}

标签： javascriptreactjsreact-hooks

解决方案

在我看来，代码的语法或结构不是问题，如果它呈现标题至少意味着一切正常。我建议查看 chrome 中的反应开发工具，并检查组件是否具有它们应该具有的所有道具

推荐阅读