React模态框切换时组件重复渲染问题排查与解决

问题出在哪 #

1. 回调函数每次都重建：Guide组件每次重渲染时，handleCarConfirm这类回调都会重新生成，就算子组件加了React.memo，因为函数引用变了，子组件还是会跟着重渲染。
2. 闭包抓了旧状态：handleSeveritySubmit里用的currentProblemIndex和selectedProblems是组件上一次渲染的快照，状态更新后旧闭包还拿着旧值，导致模态框切换逻辑乱掉。
3. 条件渲染搞事情：selectedProblems.length > 0这个外层判断会在选完问题后触发组件卸载再挂载，刚好和模态框切换撞在一起，直接把模态框重置成null了。

怎么改 #

1. 用useCallback缓存回调函数 #

给所有传递给子组件的回调套上useCallback，稳定函数引用，让React.memo能真正跳过不必要的重渲染。

2. 修复handleSeveritySubmit的闭包问题 #

用函数式更新的方式获取最新状态，避免闭包捕获旧值导致逻辑出错。

3. 调整模态框渲染逻辑 #

移除selectedProblems.length > 0的外层判断，把条件整合到show属性中，让组件始终挂载（仅通过show控制显隐），避免组件卸载再挂载导致的状态丢失。

4. 检查useModalState实现 #

确保这个自定义Hook内部的状态更新逻辑稳定，没有意外重置currentModal的情况。

修改后的完整代码：

import React, { useState, useEffect, useCallback } from 'react';
import EnterVin from './guide/EnterVIN';
import ConfirmCar from './guide/ConfirmCar';
import Problems from './guide/Problems';
import ProblemSeverityModal from './guide/ProblemSeverityModal';
import Quote from './guide/Quote';
import useVIN from '../utils/fetchVIN';
import useModalState from '../utils/useModalState';

const MemoizedConfirmCar = React.memo(ConfirmCar);
const MemoizedProblems = React.memo(Problems);
const MemoizedProblemSeverityModal = React.memo(ProblemSeverityModal);
const MemoizedQuote = React.memo(Quote);

const Guide = () => {
  const { currentModal, showModal, hideModal } = useModalState();
  const [vin, setVin] = useState('');
  const [selectedProblems, setSelectedProblems] = useState([]);
  const [currentProblemIndex, setCurrentProblemIndex] = useState(0);
  const [problemsWithSeverity, setProblemsWithSeverity] = useState([]);
  const { vinData, error } = useVIN(vin);

  // 用useCallback缓存回调，稳定引用
  const handleVinSubmit = useCallback((vin) => {
    setVin(vin);
    showModal('confirmCar');
  }, [showModal]);

  const handleCarConfirm = useCallback(() => {
    showModal('problems');
  }, [showModal]);

  const handleProblemsSubmit = useCallback((problems) => {
    console.log('Problems submitted:', problems);
    setSelectedProblems(problems);
    setCurrentProblemIndex(0);
    setProblemsWithSeverity([]);
    showModal('problemSeverity');
  }, [showModal]);

  // 使用函数式更新获取最新状态，解决闭包问题
  const handleSeveritySubmit = useCallback((problemWithSeverity) => {
    setProblemsWithSeverity(prev => [...prev, problemWithSeverity]);
    
    setCurrentProblemIndex(prevIndex => {
      if (prevIndex < selectedProblems.length - 1) {
        return prevIndex + 1;
      } else {
        showModal('quote');
        return prevIndex;
      }
    });
  }, [selectedProblems.length, showModal]);

  const handleQuote = useCallback(() => {
    hideModal();
  }, [hideModal]);

  useEffect(() => {
    console.log('Modal set:', currentModal);
  }, [currentModal]);

  return (
    <>
      <EnterVin onSubmit={handleVinSubmit} />
      {vinData && (
        <>
          <MemoizedConfirmCar
            show={currentModal === 'confirmCar'}
            onHide={hideModal}
            onConfirm={handleCarConfirm}
            vinData={vinData}
          />
          <MemoizedProblems
            show={currentModal === 'problems'}
            onHide={hideModal}
            onSubmit={handleProblemsSubmit}
          />
          {/* 移除外层判断，将条件整合到show属性中 */}
          <MemoizedProblemSeverityModal
            show={currentModal === 'problemSeverity' && selectedProblems.length > 0}
            onHide={hideModal}
            problems={[selectedProblems[currentProblemIndex]]}
            onSubmit={handleSeveritySubmit}
          />
          <MemoizedQuote
            show={currentModal === 'quote'}
            onHide={handleQuote}
            problems={problemsWithSeverity}
          />
        </>
      )}
      {error && <p>{error}</p>}
    </>
  );
};

export default Guide;

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