React Hooks：如何在组件渲染前设置数据并解决无限循环问题

嘿，这个坑我刚学React Hooks的时候也踩过！咱们先理清楚问题出在哪，再给你两种靠谱的解决方案。

错误原因分析 #

你现在的useEffect没有设置依赖数组，这就导致每次组件渲染（包括调用setRooms之后的重新渲染）都会执行这个effect。而setRooms又会修改rooms状态，触发组件再次重新渲染——这么一来就陷入了无限循环，React自然就抛出Maximum update depth exceeded的错误了。

方案一：直接在useState中初始化（推荐） #

因为你的Products是静态的mock数据，不会在组件生命周期里变化，最简洁高效的方式就是直接把处理好的数据作为useState的初始值。这样组件第一次渲染前就会把状态设置好，完全不需要useEffect：

import { useState } from 'react';
import Products from './你的Products文件路径'; // 记得替换成实际路径

function App() {
  // 直接把映射后的mock数据作为rooms的初始状态
  const [rooms, setRooms] = useState(
    Products.data.map(room => ({ id: room.id, title: room.title }))
  );
  const [days, setDays] = useState([]);

  return (
    {/* 你的组件内容 */}
  )
}

方案二：给useEffect加上空依赖数组 #

如果之后你打算把这段逻辑换成真实的API请求，想提前保留useEffect的结构，那一定要给它加上空的依赖数组[]。这个数组告诉React：这个effect只需要在组件挂载（第一次渲染完成）时执行一次，不需要监听任何状态或props的变化：

import { useState, useEffect } from 'react';
import Products from './你的Products文件路径';

function App() {
  const [rooms, setRooms] = useState([]);
  const [days, setDays] = useState([]);

  useEffect(() => {
    const roomsMapped = Products.data.map(room => ({ id: room.id, title: room.title }));
    setRooms(roomsMapped);
  }, []); // 空依赖数组是关键！只执行一次

  return (
    {/* 你的组件内容 */}
  )
}

这样修改后，就不会再出现无限循环的问题，mock数据也会在组件初始化时被正确设置到状态里啦。

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