从子组件卸载时从子组件更新父组件

Question

我有一个父组件，它有一个子组件数组，每次单击next按钮时都会显示下一个子组件。

const SqlSchema = () => {
  const [activeStep, setActiveStep] = useState(0);
  const [stepResponse, setStepResponse] = useState();
  const steps = ['Connect', 'Define tables', 'Define hierarchy', 'Finish']; 

  const getStepContent = (step) => {
    switch (step) {
      case 0:
        return <ConnectToDB onSubmit={setStepResponse} />;
      case 1:
        return <DefineTables data={stepResponse.data} onSubmit={setStepResponse} />;
      case 2:
        return <DefineHierarchy data={stepResponse.data} onSubmit={setStepResponse} />;
      case 3:
          return <Finish data={stepResponse.data} onSubmit={setStepResponse} />
    }
  };

  const handleNext = () => {
    setActiveStep((prevActiveStep) => prevActiveStep + 1);
  };

  const handleBack = () => {
    setActiveStep((prevActiveStep) => prevActiveStep - 1);
  };

  return (
     <Stepper activeStep={activeStep}>
        {steps.map(label => (
            <Step key={label}>
              <StepLabel>{label}</StepLabel>
            </Step>
        ))}
      </Stepper>

      <div>
        {activeStep === steps.length ? (
          <Typography className={classes.instructions}>
            All steps completed - you&apos;re finished
          </Typography>
        ) : (
          <div>
            <Typography>{getStepContent(activeStep)}</Typography>
            <div>
              <Button disabled={activeStep === 0} onClick={handleBack} className={classes.button}>
                Back
              </Button>
              <Button onClick={handleNext} className={classes.button}>
                {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
              </Button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

每个孩子都获得数据和onSubmit道具，并根据数据道具管理自己的状态。当单击next按钮时，我想使用子状态执行onSubmit prop，并用子状态更新父数据并将其发送给下一个子状态。我试着在每个孩子身上做这样的事情：

const [value, setValue] = useState(props.data);
useEffect(() => {
  return () => props.onSubmit(value);
}, []);

但它发送的是初始状态而不是更新后的状态。如果我将“值”添加到useEffect中的依赖项数组中，onSubmit将在每个setValue上被调用，我不希望发生这种情况。有没有办法只在父级中单击“下一步”按钮时才从子进程中获取更新后的状态？

Answer 1

我不得不说，这似乎是一个奇怪的设计选择，但您可以使用ref来跟踪当前值：

const [value, setValue] = useState(props.data);
const valueRef = useRef(value)

useEffect(() => {
    valueRef.current = value
}, [value])

useEffect(() => {
  return () => props.onSubmit(valueRef.current);
}, []);