如何在映射中使用三元算子？

Question

我试图将mealContainer重定向到Meals，以显示该数据的详细信息。顺便说一句，我正在使用mealDB作为API。但问题是，当我单击div来显示细节时，它有时会变成空，有时会显示数据。我不知道为什么会发生这种事。因此，我试图通过使用三元操作符来显示当它是空时的警告。我怎么能这么做？

import React, { useState } from "react";
import Meals from "../Meals/Meals";
import "./MealCategory.css";

const MealCategory = ({ mealCategory }) => {
  const { strCategory, strCategoryThumb } = mealCategory;
  const [mealsContainer, setMealsContainer] = useState([]);

  const handleOnClick = (e) => {
    e.preventDefault();
    const categoryName = e.target.innerText;
    const categoryUrl = `https://www.themealdb.com/api/json/v1/1/filter.php?c=${categoryName}`;

    fetch(categoryUrl)
      .then((res) => res.json())
      .then((data) => setMealsContainer(data.meals));
    // .then(data => console.log(data))
  };
  return (
    <div>
      <div onClick={handleOnClick} className="col py-3 text-center">
        <div className="card d-flex flex-row align-items-center">
          <div className="img">
            <img src={strCategoryThumb} className="card-img-top" alt="..." />
          </div>
          <div className="card-body">
            <h1 className="card-title fs-2">{strCategory}</h1>
          </div>
        </div>
      </div>
      {mealsContainer.map((meals) => (
        <Meals meals={meals} />
      ))}
    </div>
  );
};

export default MealCategory;

Answer 1

正如您说的，有时您会得到null，所以即使在map中使用三元操作符，也会出现错误，因为您无法在计算为null的数组上运行映射。是的，如果您关心的是如何在map中使用三元运算符，那么：

{mealsContainer ?
mealsContainer.map(meals => <Meals meals={meals} />) : <p>Error loading data!</p>
}