React：如何將數據渲染到組件中？

Question

我想將數據從 props 傳遞到另一個組件，但我在從嵌套數組傳遞數據時遇到問題。 我的 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 的nodes ：

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

console.log(dish.title)正在正確打印但未將我的組件呈現到頁面。

Answer 1

您的 return 語句在forEach內，因此它不起作用，您需要將值返回給父map function：

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

Answer 2

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;