Reactjs 使用 map 循环浏览列表列表中的列表并显示它们

我需要循环通过数据中的列表列表中的列表并检索索引，以便在我的Reactjs项目中显示它们.我似乎找不到一种正确的方法，既不会在索引走得太远时出错，也不会在屏幕上逐个显示的内部显示多个索引.

以下是代码的数据，如果它清除了任何东西:

const recettes = [
  {
    id: 0,
    nom: "Quiche aux poireaux",
    tprep: "1h35",
    portions: 6,
    ingredients: [
      {
        nom: "Pâte brisée",
        qte: "1",
      },
      {
        nom: "Oeufs",
        qte: "6",
      },
      {
        nom: "Poireau emincé",
        qte: "240g",
      },
      {
        nom: "Fromage gruyère",
        qte: "125g",
      },
      {
        nom: "Crème 35%",
        qte: "500ml",
      },
    ],
    preparation:
      "Étaler la pâte dans un moule à tarte. Faire cuire le poireau dans le beurre 5 minutes ou jusqu'à ce qu'il soit tombé. Dans un bol, fouetter les œufs. Ajouter la crème, les trois quarts du poireau et le fromage. Poivrer. Verser dans la croûte. Répartir le reste du poireau. Cuire au four 1 h 15 ou jusqu'à ce que la quiche soit légèrement dorée et que le centre soit tout juste pris. Couper en pointes et servir.",
  },
  {
    id: 1,
    nom: "Curry de pois chiches et chou-fleur",
    tprep: "20 minutes",
    portions: 2,
    ingredients: [
      {
        nom: "Coriandre moulue",
        qte: "10 ml",
      },
      {
        nom: "Garam masala",
        qte: "10 ml",
      },
      {
        nom: "Gingembre moulu",
        qte: "2,5 ml",
      },
      {
        nom: "Ail émincé",
        qte: "1/2 gousse",
      },
      {
        nom: "Harissa",
        qte: "1 ml",
      },
      {
        nom: "Têtes de chou-fleur",
        qte: "200g",
      },
      {
        nom: "Pois chiches rincés",
        qte: "400 ml",
      },
      {
        nom: "Oignon émincé",
        qte: "1",
      },
      {
        nom: "Huile d'olive",
        qte: "30 ml",
      },
      {
        nom: "Lait de coco",
        qte: "160 ml",
      },
    ],
    preparation:
      "Dans une poêle à feu moyen, attendrir l'oignon dans l'huile 5 minutes. Ajouter le mélange d'épices et l'ail et poursuivre la cuisson 2 minutes en remuant. Ajouter le mélange de chou-fleur, le lait de coco et l'eau. Porter à ébullition et laisser mijoter 10 minutes ou jusqu'à ce que le chou-fleur soit tendre. Ajouter de l'eau au besoin. Servir avec des quartiers de lime et des pains naans grillés, si désiré.",
  },
];

下面是显示它们的react 代码:

export default function Recette() {
  const [counter, setCounter] = useState(0);

  if (counter < 0) {
    setCounter(counter + 1);
  }

  return (
    <>
      <div className="name-page">
        <br />

        <div className="topBlock">
          <div className="Recette-name">
            <div className="Section-button">
              <button
                onClick={() => setCounter(counter - 1)}
                className="buttons"
              >
                <div className="button-text">Precedant</div>
              </button>{" "}
              <button
                onClick={() => setCounter(counter + 1)}
                className="buttons"
              >
                <div className="button-text">Suivant</div>
              </button>
            </div>
            <div className="text-section-name">
              <h2>{donnees[counter].nom}</h2>

              <h3>Temp de preparation: {donnees[counter].tprep} </h3>

              <h3>Portions: {donnees[counter].portions} </h3>
            </div>
          </div>

          <div className="Recette-image">
            <img className="quiche" src={quiche}></img>
          </div>
        </div>

        <br />

        <div className="bottomBlock">
          <div className="Recette-ingredients">
            <h3 className="recette-title">Ingredients</h3>
            <li className="ingredient-list">
              <h4 className="recette-data-name">
                {donnees[counter].ingredients[0].nom}
              </h4>{" "}
              <h4 className="recette-data-qte">
                {donnees[counter].ingredients[0].qte}
              </h4>
            </li>
          </div>

          <div className="Recette-Preparation">
            <h3 className="preparation-title">Preparation</h3>
            <h4 className="preparation-textArea">{donnees[0].preparation}</h4>
          </div>
        </div>
      </div>
    </>
  );
}

我使用useState函数来计算我想要访问并正确显示的列表的主索引，但我try 将其添加到a，以查看是否会显示更多，但只有一个本身显示. 我try 使用"map"对象，但我不知道如何在不超出列表索引的情况下正确地使其循环