React组件调用父组件回调后state无法更新的问题排查

问题根因 #

你的问题出在子组件状态与父组件状态不同步，加上React状态更新的异步特性，导致调用父组件回调后，子组件的按钮状态无法正常响应：

1. 子组件的选中状态初始化时依赖父组件传入的props，但父组件状态更新后，子组件未同步更新自身state
2. 点击按钮时，传给父组件的是旧状态值，导致父、子状态出现偏差，最终子组件的state未跟上变化

具体修复步骤 #

1. 子组件同步父组件props到自身状态 #

在课程卡片子组件中，添加useEffect监听父组件传入的选中状态，自动同步自身state：

import { useState, useEffect } from 'react';

const CourseCard = ({ course, isSelected, onCourseSelect }) => {
  const [isCardSelected, setIsCardSelected] = useState(isSelected);

  // 父组件选中状态变化时，同步子组件状态
  useEffect(() => {
    setIsCardSelected(isSelected);
  }, [isSelected]);

  const handleSelect = () => {
    const newStatus = !isCardSelected;
    // 先更新子组件自身状态
    setIsCardSelected(newStatus);
    // 将最新状态传递给父组件
    onCourseSelect(course, newStatus);
  };

  return (
    <div className="course-card">
      <h3>{course.name}</h3>
      <button 
        className={`select-btn ${isCardSelected ? 'selected' : ''}`}
        onClick={handleSelect}
      >
        {isCardSelected ? '已选课' : '选课'}
      </button>
    </div>
  );
};

2. 父组件正确维护选中课程列表 #

父组件处理子组件回调时，使用函数式更新修改选中课程数组，避免覆盖旧状态：

const Courses = ({ courses }) => {
  const [selectedCourses, setSelectedCourses] = useState([]);

  const handleCourseSelect = (course, isSelected) => {
    setSelectedCourses(prevState => {
      if (isSelected) {
        // 添加选中课程
        return [...prevState, course];
      } else {
        // 移除选中课程
        return prevState.filter(item => item.id !== course.id);
      }
    });
  };

  return (
    <div className="courses-container">
      {courses.map(course => (
        <CourseCard
          key={course.id}
          course={course}
          isSelected={selectedCourses.some(item => item.id === course.id)}
          onCourseSelect={handleCourseSelect}
        />
      ))}
    </div>
  );
};

3. 避开异步状态更新陷阱 #

点击按钮时，先计算出最新状态值，再同时更新子组件state和调用父组件回调，不要直接依赖setState后的state值传递给父组件——因为setState是异步操作，此时state还未完成更新。

重要提醒 #

• 循环渲染子组件时必须添加唯一key（比如课程id），避免React复用组件导致状态混乱
• 当子组件状态依赖父组件props时，必须用useEffect监听props变化，否则父组件更新后子组件会停留在旧状态

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