React报错求助：渲染EventList时无法更新App组件

渲染事件列表时触发错误提示：

Cannot update a component (App) while rendering a different component (EventList)

需求为展示每个独立时钟对应的所有事件，以下是相关代码：

EventAction组件代码 #

import { useEffect, useState } from "react";
import EventList from "../../event-list";
import EventForm from "../event-form";

const EventAction = ({
    getEventsByClockID,
    addEvent,
    updateEvent,
    clockID,
    deleteEvent,
    deleteEventsByClockID,
}) => {
    const [isCreate, setIsCreate] = useState(false);
    const [isToggle, setIsToggle] = useState(false);
    const [eventState, setEventState] = useState(null)

    const handleCreate = () => {
        setIsCreate(!isCreate);
    }
    
    useEffect(() => {
        setEventState(getEventsByClockID(clockID, true));
    }, [isToggle])

    const handleToggle = () => {
        setIsToggle(!isToggle);
    }

    return (
        <div>
            <div>
                <button onClick={handleCreate}>Create Event</button>
                <button onClick={handleToggle}>Toggle Events</button>
            </div>
            {isCreate && (
                <>
                    <h3>Create Event</h3>
                    <EventForm
                        clockID={clockID}
                        handleEvent={addEvent}
                    />
                </>
            )}
            {isToggle && (
                <>
                    <h3>Events of this clock</h3>
                    <EventList 
                        clockID={clockID}
                        eventState={eventState}
                        deleteEvent={deleteEvent}
                        updateEvent={updateEvent}
                        deleteEventsByClockID={deleteEventsByClockID}
                    />
                </>
            )}
        </div>
    )
}

export default EventAction;

App组件代码 #

import ClockList from "./components/clock-list";
import LocalClock from "./components/local-clock";
import useApp from "./hooks/useApp";
import { localClockInitState } from "./initialStates/clockInitState";

const App = () => {

  const {
    localClock,
    clocks,
    updateLocalClock,
    createClock,
    updateClock,
    deleteClock,
    getEventsByClockID,
    addEvent,
    deleteEvent,
    updateEvent,
    deleteEventsByClockID,
  } = useApp(localClockInitState);

  return (
    <div>
      <LocalClock 
        clock={localClock} 
        updateClock={updateLocalClock} 
        createClock={createClock} 
      />
      <ClockList 
        clocks={clocks}
        localClock={localClock.date}
        updateClock={updateClock} 
        deleteClock={deleteClock}
        getEventsByClockID={getEventsByClockID}
        addEvent={addEvent}
        deleteEvent={deleteEvent}
        updateEvent={updateEvent}
        deleteEventsByClockID={deleteEventsByClockID} 
      />
    </div>
  )
}

export default App;

useApp Hook代码 #

import { useState } from "react";
import deepClone from "../utils/deepClone";
import generateID from "../utils/generateId";
import useEvents from "./useEvents";

const getID = generateID('clock');

const useApp = (initValue) => {
  const [localClock, setLocalClock] = useState(deepClone(initValue));
  const [clocks, setClocks] = useState([]);

  const {
    getEventsByClockID,
    addEvent,
    deleteEvent,
    deleteEventsByClockID,
    updateEvent,
  } = useEvents();

  const updateLocalClock = (data) => {
    setLocalClock({
      ...localClock,
      ...data,
    })
  }

  const createClock = (clock) => {
    clock.id = getID.next().value;
    
    setClocks((prev) => ([
      ...prev, clock
    ]))
  }

  const updateClock = (updatedClock) => {
    setClocks(clocks.map(clock => {
      if(clock.id === updatedClock.id) return updatedClock;

      return clock;
    }));
  }

  const deleteClock = (id) => {
    setClocks(clocks.filter(clock => clock.id !== id));
  }

  return {
    localClock,
    clocks,
    updateLocalClock,
    createClock,
    updateClock,
    deleteClock,
    getEventsByClockID,
    addEvent,
    deleteEvent,
    updateEvent,
    deleteEventsByClockID,
  }
}

export default useApp;

问题分析 #

错误核心是在EventList组件渲染过程中，触发了App组件的状态更新，可能的触发点：

1. EventList渲染时直接调用了deleteEvent/updateEvent等会修改App状态的方法，而非在用户交互回调中执行
2. getEventsByClockID函数内部存在修改App状态的副作用
3. EventAction中通过useEffect维护eventState的逻辑，导致状态同步时触发意外更新

解决方案 #

1. 修正EventList的状态更新时机

检查EventList组件代码，确保所有修改状态的方法（deleteEvent、updateEvent等）仅在用户交互回调（如onClick、onSubmit）中调用，禁止在组件渲染阶段直接执行状态更新操作。

2. 简化EventAction的事件数据获取逻辑

移除冗余的eventState状态，直接在渲染EventList时调用getEventsByClockID获取数据，减少状态同步问题：

import { useState } from "react";
import EventList from "../../event-list";
import EventForm from "../event-form";

const EventAction = ({
    getEventsByClockID,
    addEvent,
    updateEvent,
    clockID,
    deleteEvent,
    deleteEventsByClockID,
}) => {
    const [isCreate, setIsCreate] = useState(false);
    const [isToggle, setIsToggle] = useState(false);

    const handleCreate = () => {
        setIsCreate(!isCreate);
    }

    const handleToggle = () => {
        setIsToggle(!isToggle);
    }

    return (
        <div>
            <div>
                <button onClick={handleCreate}>Create Event</button>
                <button onClick={handleToggle}>Toggle Events</button>
            </div>
            {isCreate && (
                <>
                    <h3>Create Event</h3>
                    <EventForm
                        clockID={clockID}
                        handleEvent={addEvent}
                    />
                </>
            )}
            {isToggle && (
                <>
                    <h3>Events of this clock</h3>
                    <EventList 
                        clockID={clockID}
                        eventState={getEventsByClockID(clockID, true)}
                        deleteEvent={deleteEvent}
                        updateEvent={updateEvent}
                        deleteEventsByClockID={deleteEventsByClockID}
                    />
                </>
            )}
        </div>
    )
}

export default EventAction;

3. 确保getEventsByClockID是纯函数

检查useEvents Hook的实现，保证getEventsByClockID仅返回数据，不包含任何修改组件状态的副作用。如果该函数需要更新状态，需将状态更新逻辑拆分到独立方法中。

内容的提问来源于stack exchange，提问作者Md Muaz Ahmed