使用useEffect与setState组合时React函数组件不重新渲染

核心问题点： #

1. Loading判断逻辑失效
   你初始化data为[]（空数组），但在JS里![]的结果是false，导致if (!data)分支永远不会执行。API请求pending时，组件直接进入列表渲染逻辑，但此时data还是空数组，map不会生成任何元素，看起来就像组件没更新。

2. JSX语法错误

   • 返回的JSX未被单个根元素包裹（React要求组件必须返回单个顶层元素）
   • map函数语法不完整，缺少闭合的括号与大括号
   • data&&(...)的写法在JSX结构中存在格式问题

3. 未明确处理请求pending状态
   没有专门的状态标记请求是否在进行，导致加载状态无法正确展示。

修正后的完整代码： #

const MyComponent = () => {
  const [data, setData] = useState([]);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(true); // 新增加载状态

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(`URL`);
        // 新增：判断HTTP请求是否成功
        if (!response.ok) {
          throw new Error(`请求失败: ${response.status}`);
        }
        const json = await response.json();
        setData(json.data || []); // 兜底处理，防止返回undefined
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false); // 请求结束后无论成败，关闭加载状态
      }
    }
    fetchData();
  }, []);

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>An error occurred: {error.message}</div>;
  }

  return (
    <div> {/* 用根元素包裹所有返回内容 */}
      {data.length > 0 ? (
        data.map((item) => (
          // 必须给map生成的元素添加唯一key属性
          <div key={item.id}>{/* 这里填入你的展示逻辑 */}</div>
        ))
      ) : (
        <div>暂无数据</div>
      )}
    </div>
  );
};

关键修复说明： #

• 新增loading状态，精准控制加载态的展示，替代原来无效的空数组判断
• 修复JSX语法问题，确保结构符合React要求
• 增加response.ok判断，处理HTTP请求失败的场景（比如404、500）
• 用data.length > 0判断是否有数据，避免空数组时页面空白
• 给map生成的元素添加key属性，符合React渲染规范并提升性能

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