React子组件更新父组件数组时无限重渲染问题排查与解决

问题原因 #

1. 父组件传递的回调引用不稳定：你用useCallback定义了稳定的handleStudentsChange，但传给子组件时额外包裹了一层新箭头函数，每次父组件因students更新重渲染时，这个包裹函数都会重新创建，导致子组件拿到的props.handleStudentsChange引用始终变化。
2. 子组件useEffect依赖范围过大：子组件把整个props放进了useEffect依赖数组，只要props中任何值（包括回调引用）变化，就会触发useEffect调用父组件更新函数，父组件更新students后再次重渲染，子组件又拿到新的回调，形成无限循环。
3. 子组件本地state与父组件props不同步：子组件初始化了自己的firstName/lastName/grade状态，但父组件数据更新后，子组件本地状态不会自动同步，还会引发数据不一致问题。

修复方案 #

方案一：优化现有结构解决循环问题

1. 父组件传递稳定的回调引用：去掉包裹的箭头函数，直接把useCallback定义的handleStudentsChange传给子组件，保证函数引用不变：

// 父组件Students.tsx的map渲染部分
<Student
  key={index}
  id={index}
  firstName={student.firstName}
  lastName={student.lastName}
  grade={student.grade}
  handleStudentsChange={handleStudentsChange} // 直接传递，不额外包裹
/>

2. 子组件优化依赖并同步props：
   • 把useEffect依赖从整个props改成具体需要的props.handleStudentsChange和props.id，缩小触发范围；
   • 添加useEffect同步父组件props到子组件本地状态；
   • 用React.memo包裹子组件，减少不必要的重渲染。

修改后的Student.tsx：

import React, { useState, useEffect, memo } from "react";
import TextField from "@mui/material/TextField";

interface student {
  firstName: string;
  lastName: string;
  grade: number;
}

interface studentProps {
  id: number;
  firstName: string;
  lastName: string;
  grade: number;
  handleStudentsChange: (index: number, student: student) => void;
}

const Student = memo((props: studentProps) => {
  const [firstName, setFirstName] = useState(props.firstName);
  const [lastName, setLastName] = useState(props.lastName);
  const [grade, setGrade] = useState(props.grade);

  // 同步父组件props到本地状态
  useEffect(() => {
    setFirstName(props.firstName);
    setLastName(props.lastName);
    setGrade(props.grade);
  }, [props.firstName, props.lastName, props.grade]);

  // 本地状态变化时通知父组件
  useEffect(() => {
    props.handleStudentsChange(props.id, {
      firstName,
      lastName,
      grade
    });
  }, [firstName, lastName, grade, props.handleStudentsChange, props.id]);

  return (
    <>
      <TextField
        label="firstName"
        onChange={(event) => setFirstName(event.target.value)}
        value={firstName}
      />
      <TextField
        label="lastName"
        onChange={(event) => setLastName(event.target.value)}
        value={lastName}
      />
      <TextField
        label="grade"
        onChange={(event) => setGrade(+event.target.value)}
        value={grade}
      />
    </>
  );
});

export default Student;

方案二：改用受控组件写法（更简洁）

既然数据最终要同步到父组件，子组件可以完全去掉本地状态，直接用父组件props作为输入值，onChange时直接调用父组件更新函数，从根源避免循环问题：

修改后的Student.tsx：

import React, { memo } from "react";
import TextField from "@mui/material/TextField";

interface student {
  firstName: string;
  lastName: string;
  grade: number;
}

interface studentProps {
  id: number;
  firstName: string;
  lastName: string;
  grade: number;
  handleStudentsChange: (index: number, student: student) => void;
}

const Student = memo((props: studentProps) => {
  const handleFieldChange = (field: keyof student, value: string | number) => {
    props.handleStudentsChange(props.id, {
      ...props,
      [field]: value
    });
  };

  return (
    <>
      <TextField
        label="firstName"
        onChange={(event) => handleFieldChange("firstName", event.target.value)}
        value={props.firstName}
      />
      <TextField
        label="lastName"
        onChange={(event) => handleFieldChange("lastName", event.target.value)}
        value={props.lastName}
      />
      <TextField
        label="grade"
        onChange={(event) => handleFieldChange("grade", +event.target.value)}
        value={props.grade}
      />
    </>
  );
});

export default Student;

父组件保持直接传递handleStudentsChange即可，这种写法没有本地状态和useEffect，数据完全同步，也不会出现循环问题。

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