JS布尔值API响应处理问题：页面空白原因排查及修复

核心错误点 #

• API响应结构处理错误：Postman显示API返回的是包含单个对象的数组，直接访问actualData.used必然返回undefined，需取数组第一个元素actualData[0].used。
• 异步函数不能直接作为React元素渲染：lighting是异步fetch函数，返回的是Promise对象，React无法识别并渲染Promise，必须通过状态管理处理异步数据的加载、成功、失败状态。
• 组件参数未正确解构：MembershipLight组件的参数code是props对象，直接用(code)的话，code实际是整个props而非传入的code值，需解构为({ code })。
• 异步函数未返回Promise：原lighting函数内的fetch调用未加return，导致函数默认返回undefined，无法传递异步结果。

修正后的代码 #

import { useState, useEffect } from 'react';

const red_light = <div className="h-2.5 w-2.5 rounded-full bg-red-700 mr-2"></div>;
const green_light = <div className="h-2.5 w-2.5 rounded-full bg-green-400 mr-2"></div>;

// 封装API请求函数，专注数据获取
const fetchMembershipData = async (code) => {
  const response = await fetch(`API?code=${code}`); // 这里需将code传入API地址
  if (!response.ok) {
    throw new Error(`HTTP错误: 状态码 ${response.status}`);
  }
  const data = await response.json();
  return data[0].used; // 直接返回used字段的布尔值
};

const MembershipLight = ({ code }) => {
  const [isUsed, setIsUsed] = useState(null); // 初始null表示加载中
  const [error, setError] = useState(null);

  useEffect(() => {
    const loadData = async () => {
      try {
        const usedStatus = await fetchMembershipData(code);
        setIsUsed(usedStatus);
      } catch (err) {
        setError(err.message);
      }
    };

    loadData();
  }, [code]); // code变化时重新请求

  // 加载状态占位
  if (isUsed === null) {
    return <div className="h-2.5 w-2.5 rounded-full bg-gray-300 mr-2"></div>;
  }

  // 错误状态提示
  if (error) {
    return <div>加载失败: {error}</div>;
  }

  // 根据状态返回对应组件
  return isUsed ? red_light : green_light;
};

export default MembershipLight;

修正说明 #

1. 拆分职责：将API请求逻辑抽为单独函数，专注数据获取，返回最终需要的布尔值。
2. 状态管理：用useState维护状态与错误信息，useEffect触发异步请求，符合React异步数据处理规范。
3. 边界状态处理：增加加载中占位和错误提示，避免页面空白。
4. 响应结构修正：通过data[0].used正确获取数组内对象的字段值。
5. props解构：正确解构组件参数，获取传入的code值。

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