如何在React的map方法中使用三元运算符？解决MealDB API请求后mealContainer偶现null的提示问题

看起来你遇到的核心问题是MealDB API在部分请求场景下会返回null作为data.meals的值，导致mealsContainer状态被设为null，后续调用.map()时触发报错。另外，点击事件中直接读取e.target.innerText可能会意外获取到多余空白字符（比如标题文本的换行、空格），导致请求的分类名称不匹配，进一步引发API返回空结果。

我们可以分两步解决这个问题：

1. 用三元运算符处理null/空状态，显示友好提示 #

在渲染餐食列表的部分，先判断mealsContainer的状态：如果它是null或者空数组，就显示警告信息；否则正常渲染Meals组件。同时，我们可以在状态更新阶段就把null转换成空数组，从根源避免null.map()的报错。

2. 修复分类名称的获取逻辑 #

直接从DOM读取文本存在不确定性，建议改用组件已有的strCategory变量来拼接API请求地址，这样能保证分类名称的准确性。

修改后的完整代码如下：

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 [isLoading, setIsLoading] = useState(false);

  const handleOnClick = (e) => {
    e.preventDefault();
    // 直接使用props中的分类名称，避免DOM读取的不确定性
    const categoryName = strCategory;
    const categoryUrl = `https://www.themealdb.com/api/json/v1/1/filter.php?c=${categoryName}`;
    
    setIsLoading(true);
    fetch(categoryUrl)
      .then((res) => res.json())
      .then((data) => {
        // 把API返回的null转为空数组，避免状态变为null
        const mealsData = data.meals || [];
        setMealsContainer(mealsData);
      })
      .catch((err) => {
        console.error("请求餐食数据出错:", err);
        setMealsContainer([]);
      })
      .finally(() => {
        setIsLoading(false);
      });
  };

  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={`${strCategory} 分类图片`} />
          </div>
          <div className="card-body">
            <h1 className="card-title fs-2">{strCategory}</h1>
          </div>
        </div>
      </div>

      {/* 用三元运算符依次处理加载、空数据、正常渲染的情况 */}
      {isLoading ? (
        <p>正在加载餐食数据...</p>
      ) : mealsContainer.length === 0 ? (
        <p className="text-warning">⚠️ 没有找到该分类下的餐食，请重试！</p>
      ) : (
        mealsContainer.map((meal) => (
          <Meals key={meal.idMeal} meals={meal} />
        ))
      )}
    </div>
  );
};

export default MealCategory;

关键修改点说明： #

• 避免状态为null：通过data.meals || []的逻辑，确保即使API返回null，我们也会存入空数组，彻底避免null.map()的报错。
• 可靠的分类名称：直接使用组件props中的strCategory，不会出现因DOM文本的空白字符导致的请求错误。
• 加载状态提示：新增isLoading状态，在请求过程中显示加载提示，让用户知道系统正在处理。
• 空状态友好提示：用三元运算符判断数组长度，为空时显示警告信息，替代空白的页面反馈。
• 添加key属性：在map渲染时添加key={meal.idMeal}，符合React列表渲染的最佳实践，消除控制台警告。

这样修改后，无论API返回null、空结果还是正常数据，你的组件都能稳定运行，并给用户清晰的反馈。

内容的提问来源于stack exchange，提问作者Sumon Chandra