Next.js中React状态更新异常：子组件传函数后状态重置

核心问题 #

1. 直接修改State引用：原始代码中直接修改world.entities的属性，违反React不可变更新原则，导致React无法感知状态变化，渲染异常。
2. 闭包过时问题：motionUpdate频繁调用时，闭包捕获的movements和world是旧值，导致状态更新基于过时数据，出现重置或计算错误。
3. 多状态同步冲突：同时更新movements和world两个独立状态，没有保证两者的一致性，加剧状态混乱。

最优解决方案 #

使用useReducer替代useState管理复杂状态，将状态更新逻辑集中到reducer中，避免闭包问题；严格遵循不可变更新原则；同时简化motionUpdate的逻辑，保证函数稳定性。

修改后的完整代码 #

"use client";

import { EntityType, World } from "@/types/World";
import React, { useCallback, useReducer } from "react";
import dynamic from "next/dynamic";

const CanvasPage = dynamic(() => import("./RayTracingCanvas"));

// 定义action类型
type Action = { type: "UPDATE_MOTION" };

// 初始化状态，整合movements与world
const initialState: { world: World; movements: number[] } = {
  movements: [0, 0, 0, 0, 0],
  world: {
    lights: [
      {
        x: -30,
        y: -10,
        z: 20,
      },
    ],
    camera: {
      point: { x: 0, y: 1.8, z: 10 },
      fov: 45,
      direction: { x: 0, y: 3, z: 0 },
    },
    entities: [
      {
        type: EntityType.Sphere,
        point: { x: 0, y: 3.5, z: -3 },
        color: { r: 155, g: 50, b: 155, a: 255 },
        specular: 0.2,
        lambert: 0.7,
        ambient: 0.1,
        radius: 1,
        speed: 0.1,
      },
      {
        type: EntityType.Sphere,
        point: { x: -4, y: 3.5, z: -1 },
        color: { r: 155, g: 25, b: 40, a: 255 },
        specular: 0.1,
        lambert: 0.9,
        ambient: 0.0,
        radius: 0.2,
        speed: 0.2,
      },
      {
        type: EntityType.Sphere,
        point: { x: -7, y: 3.5, z: -10 },
        color: { r: 34, g: 255, b: 34, a: 255 },
        specular: 0.2,
        lambert: 0.7,
        ambient: 0.1,
        radius: 0.1,
        speed: 0.3,
      },
      {
        type: EntityType.Sphere,
        point: { x: -8, y: 3.5, z: -5 },
        color: { r: 34, g: 13, b: 134, a: 255 },
        specular: 0.2,
        lambert: 0.7,
        ambient: 0.1,
        radius: 0.3,
        speed: 0.4,
      },
      {
        type: EntityType.Sphere,
        point: { x: -14, y: 3.5, z: -3 },
        color: { r: 230, g: 230, b: 21, a: 255 },
        specular: 0.2,
        lambert: 0.7,
        ambient: 0.1,
        radius: 0.5,
        speed: 0.5,
      },
    ],
  },
};

// 状态更新reducer
const reducer = (state: typeof initialState, action: Action): typeof initialState => {
  switch (action.type) {
    case "UPDATE_MOTION":
      // 计算新的movements
      const newMovements = state.movements.map((val, index) => val + state.world.entities[index].speed);
      
      // 不可变更新实体位置
      const newEntities = state.world.entities.map((entity, index) => {
        const movement = newMovements[index];
        const newPoint = { ...entity.point };
        
        switch (index) {
          case 0:
            newPoint.x = Math.sin(movement);
            newPoint.z = Math.cos(movement);
            break;
          case 1:
            newPoint.x = Math.sin(movement) * 2;
            newPoint.z = -4 + Math.cos(movement) * 2;
            break;
          case 2:
            newPoint.x = Math.sin(movement) * 3;
            newPoint.z = -3 + Math.cos(movement) * 3;
            newPoint.y = 3.5 + Math.sin(movement) * 3;
            break;
          case 3:
            newPoint.x = Math.sin(movement) * 2;
            newPoint.z = -3 + Math.cos(movement) * 2;
            break;
          case 4:
            newPoint.x = Math.sin(movement) * 4;
            newPoint.z = -3 + Math.cos(movement) * 4;
            newPoint.y = 3.5 + Math.cos(movement) * 4;
            break;
          default:
            break;
        }
        
        return { ...entity, point: newPoint };
      });
      
      return {
        ...state,
        movements: newMovements,
        world: {
          ...state.world,
          entities: newEntities,
        },
      };
    default:
      return state;
  }
};

export default function Home() {
  const [state, dispatch] = useReducer(reducer, initialState);
  
  // 稳定的motionUpdate函数
  const motionUpdate = useCallback(() => {
    dispatch({ type: "UPDATE_MOTION" });
    return state.world;
  }, [dispatch, state.world]);

  return (
    <div>
      <CanvasPage width={1280} height={720} AnimationCallback={motionUpdate} />
    </div>
  );
}

关键优化点说明 #

1. useReducer管理复杂状态：将movements和world整合到一个状态对象中，通过reducer集中处理更新逻辑，避免多状态同步冲突，同时确保每次更新都基于最新状态。
2. 不可变更新：所有嵌套对象（如point、entity、entities）都通过浅拷贝创建新对象，保证React能正确检测到状态变化。
3. 稳定的motionUpdate：使用useCallback包裹，依赖仅为dispatch和state.world，避免子组件因函数引用变化频繁重渲染，同时确保返回的是最新的world状态。
4. 消除闭包问题：reducer内部直接获取最新的state，不再依赖外部闭包的过时值，彻底解决状态重置问题。

内容的提问来源于stack exchange，提问作者Ze Hou Zhang