React:Switch Case/Same Component无法卸载

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组件.它使用相同的逻辑,所以我使用相同的组件.

我的问题是:该Select组件不台阶之间卸载1和2即使道具的变化.

因此,从步骤1更改为步骤2时,我的本地状态不会重置.

如何强制卸载组件.

Answer 1

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

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