javascript - react : Switch Case/Same Component doesn't Unmount

Question

我正在 React-native 中实现一个多步骤过程(类似于 React)。

我有一个函数可以确定显示哪一步:

renderStep = step => {

  switch (processStep[step]) {
    case 0:
      return (
        <Product />
      );
      break;
    case 1:
      return (
        <Select data={size} />
      );
      break;
    case 2:
      return (
        <Select data={adresses} />
      );
      break;
    case 3:
      return (
        <RecapOrder />
      );
      break;
    default:
      return null;
  }
};

我的第二步和第三步使用相同的 _stepSelect 组件。它使用相同的逻辑，所以我使用相同的组件。

我的问题是:即使 Prop 发生变化，Select 组件也不会在步骤 1 和 2 之间卸载。

因此，当从第 1 步更改为第 2 步时，我的本地状态不会重置。

如何强制卸载组件。

Answer 1

我建议首先尝试向在此函数中呈现的每个元素添加键。我已经看到 React 无法分辨正在渲染的组件之间的区别的问题，因此它会跳过一些生命周期事件并直接跳到渲染。

<Product key="process-step-product"/>