Javascript 反应：如何将数据呈现到组件中？

我想将数据从道具传递到另一个组件，但从嵌套数组传递数据时遇到问题。我的JSON具有以下结构：

[
  {
    id: 1,
    category: "Fish",
    nodes: [
      {
        id: 1,
        title: "Bacalhau com broa",
        ingredients: [
          "bacalhau",
          "broa"
        ]
      },
      {
        id: 2,
        title: "Bacalhau à Zé do Pipo",
        ingredients: [
          "bacalhau",
          "broa",
          "5 cebolas"
        ]
      },
    ],
  }
];

我尝试了以下方法，其中

dishesData

包含来自JSON的

节点

：

        {dishesData.map((dishes) => {
          dishes.forEach((dish) => {
            console.log(dish.title)
            return <Dish title={dish.title} ingredients={dish.ingredients} />;
          });          
        })}

{dishesData.map（（碟子）=>{
菜肴。forEach（（菜肴）=>{
控制台日志（dish.title）
返回；
});          
})}

---

console.log（dish.title）

正在正确打印组件，但没有将我的组件呈现到页面上。

您的返回语句在

forEach

中，因此它不起作用，您需要将值返回到父

map

函数：

{dishesData.map((dishes) => {
  return dishes.map((dish) => {
    return <Dish title={dish.title} ingredients={dish.ingredients} />;
  });          
})}

{dishesData.map（（碟子）=>{
返回菜品。地图（（菜品）=>{
返回；
});          
})}

从“React”导入React；
//Json数据
常数dishesData=[
{
id:1，
类别：“鱼”，
节点：[
{
id:1，
标题：“Bacalhau com broa”，
成分：[
“巴卡劳”，
“兄弟”
]
},
{
id:2，
标题：“巴卡哈·泽多·皮波”，
成分：[
“巴卡劳”，
“兄弟”，
“5塞博拉斯”
]
},
],
}
];
//第一个组件-我使用了一个功能组件
常量组件一=（道具）=>{
//输出：Bacalhau com broa，BacalhauáZédo Pipo
const answer=dishesData.map（碟子=>{
dish.nodes.map（dish=>dish.title）
});
//标题道具被传送到组件两个组件
返回(
);
}
//另一个将接收传递给它的道具的组件
常量组件二=（道具）=>{
console.log（props.title）
返回(
{props.title}

)
}
导出默认组件一；

什么是不渲染的？控制台日志？

import React from 'react';

// Json data 
const dishesData = [
  {
    id: 1,
    category: "Fish",
    nodes: [
      {
        id: 1,
        title: "Bacalhau com broa",
        ingredients: [
          "bacalhau",
          "broa"
        ]
      },
      {
        id: 2,
        title: "Bacalhau à Zé do Pipo",
        ingredients: [
          "bacalhau",
          "broa",
          "5 cebolas"
        ]
      },
    ],
  }
];


// First component - I have used a functional component 
const ComponentOne = (props) => {
  // output: Bacalhau com broa, Bacalhau à Zé do Pipo
  const answer = dishesData.map(dishes => {
    dishes.nodes.map(dish=> dish.title)
  });
  
  // a title prop is pased to ComponentTwo component
  return (
      <ComponentTwo title = {answer} />
  );
}


// Another component that will receive our props passed to it

const ComponentTwo = (props) => {
  console.log(props.title)
  return (
    <p> {props.title} </p>
   )
}

export default ComponentOne;