Question

我有一个特定的组件使用 useState 管理自己的状态。 问题是我想有条件地渲染相同的组件：

const PaymentScannerView: React.FC<Props> = (props: React.PropsWithChildren<Props>) => {
  const { t } = useTranslation();

  return props.onFront ? (
    <PBScanner
      header={t('paymentScanner.front.capture.header')}
      instruction={t('paymentScanner.front.capture.instruction')}
      reCaptureText={t('paymentScanner.front.confirmation.reCaptureText')}
      continueText={t('paymentScanner.front.confirmation.continueText')}
      confirmCaptureHandler={props.confirmFrontCaptureHanlder}
      reCaptureHandler={props.reCaptureFrontHandler}
    />
  ): (
    <PBScanner
      header={t('paymentScanner.back.capture.header')}
      instruction={t('paymentScanner.back.capture.instruction')}
      reCaptureText={t('paymentScanner.back.confirmation.reCaptureText')}
      continueText={t('paymentScanner.back.confirmation.continueText')}
      confirmCaptureHandler={props.confirmBackCaptureHandler}
      reCaptureHandler={props.reCaptureBackHandler}
    />
  );
};

但我不想在这两个“版本”之间共享这种状态。为了澄清这一点，假设这个 PBScanner 组件具有从 0 开始计数的内部状态。那么它是否在第一个条件下渲染了 5 次（意味着 props.onFront 为真 5 次），那么，即使突然 props.onFront 等于 false，第二个版本也会保留状态，并将以等于 5 的计数器呈现。

那不是我想要的。我想“处理”这两个组件，因为它们不会共享状态。

我该怎么做？

Answer 1

这取决于你真正想要什么。

如果状态应该在两个组件中分别维护，那么您应该同时渲染它们。然后组件本身应该决定它是否会返回任何东西。（根据@NicolasMnettrier 的建议）。
如果您希望它们在 props.onFront 更改时丢失其状态，那么最简单的解决方案是添加键属性。例如：
```
<PBScanner key="front" .../> // and "back" respectively
```
这种方式 react 会认为两者是不同的，给它们自己的状态。
请注意，尽管这会使它们每次props.onFront 更改时丢失其状态。

Answer 2

正如他们之前所说，这取决于您想要什么。在我看来，简单的解决方案是将 key 属性添加到 PBScanner。

另一种解决方案是在 **PBScanner ** 中添加 useEffect 钩子，如下所示：

import React, {useEffect} from 'react'; 
...
export default PBScanner({header, ...}) {
const [count, setCount] = useState(0);
UseEffect(() => {
setCount(0); // each time PBScanner update with change in header
// (instruction...), Count go to 0.
}, [header]);//here you can use header or instruction ...

}

如何渲染相同的组件但具有初始状态（有条件地）？

2 个答案: