每次模态更改时模态重新渲染的演练

Question

我有一系列弹出的模态，并向用户询问汽车估算网站的问题，每次显示新模态时，整个组件和子组件都会重新渲染。这没问题，除非在我的问题模态提交中，整个组件重新渲染并将当前模态设置回空。目标是为问题模式中选择的每个问题显示 ProblemSeverityModal。下面是重新渲染每个模式更改的组件，这是 github 上的完整项目

import React, { useState, useEffect } 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);

  const handleVinSubmit = (vin) => {
    setVin(vin);
    showModal('confirmCar');
  };

  const handleCarConfirm = () => {
    showModal('problems');
  };

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

  const handleSeveritySubmit = (problemWithSeverity) => {
    setProblemsWithSeverity(prev => [...prev, problemWithSeverity]);
    
    if (currentProblemIndex < selectedProblems.length - 1) {
      setCurrentProblemIndex(prev => prev + 1);
    } else {
      showModal('quote');
    }
  };

  const handleQuote = () => {
    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}
          />
          {selectedProblems.length > 0 && (
            <MemoizedProblemSeverityModal
              show={currentModal === 'problemSeverity'}
              onHide={hideModal}
              problems={[selectedProblems[currentProblemIndex]]}
              onSubmit={handleSeveritySubmit}
            />
          )}
          <MemoizedQuote
            show={currentModal === 'quote'}
            onHide={handleQuote}
            problems={problemsWithSeverity}
          />
        </>
      )}
      {error && <p>{error}</p>}
    </>
  );
};

export default Guide;

Answer 1

您的意思是您希望组件重新渲染但不消除严重的问题吗？因为那么

setProblemsWithSeverity([]);

中的线

handleProblemsSubmit

应该被删除，因为它将

problemsWithSeverity

设置为空数组