如何检查处理返回空数组的Promise？React空状态渲染实现

方案一：直接判断数组长度（更简洁） #

不用额外维护状态变量，直接在渲染阶段判断过滤后的数组长度，就能实现空状态提示：

import React from 'react';

function YourComponent() {
  // 这里替换成你从数据库获取并过滤后的id数组
  const filteredIds = [/* 过滤结果 */];

  return (
    <div>
      {/* 渲染列表项 */}
      {filteredIds.map(id => (
        <div key={id}>{/* 这里放对应id的渲染内容 */}</div>
      ))}
      {/* 数组为空时显示提示 */}
      {filteredIds.length === 0 && <p>无内容可展示</p>}
    </div>
  );
}

export default YourComponent;

方案二：用useState维护状态（符合你的需求） #

如果一定要通过useState来控制提示显示，可以在获取并过滤数据后更新状态：

import React, { useState, useEffect } from 'react';

function YourComponent() {
  const [filteredIds, setFilteredIds] = useState([]);
  const [hasContent, setHasContent] = useState(true);

  useEffect(() => {
    // 模拟从数据库取数并过滤的逻辑
    const fetchData = async () => {
      // 替换成你的实际请求逻辑
      const response = await fetch('/api/your-data');
      const data = await response.json();
      // 过滤出需要的id数组
      const ids = data.filter(item => /* 你的过滤条件 */).map(item => item.id);
      
      setFilteredIds(ids);
      // 根据数组长度更新状态
      setHasContent(ids.length > 0);
    };

    fetchData();
  }, []);

  return (
    <div>
      {/* 渲染列表内容 */}
      {filteredIds.map(id => (
        <div key={id}>{/* 对应id的渲染内容 */}</div>
      ))}
      {/* 无内容时显示提示 */}
      {!hasContent && <p>无内容可展示</p>}
    </div>
  );
}

export default YourComponent;

其实方案一更推荐，因为filteredIds.length本身就能直接作为判断依据，没必要额外维护hasContent状态，能减少不必要的状态管理开销。

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