Question

我在React-native中实现了一个多步骤的过程（类似于反应）。

我有一个确定显示哪个步骤的函数：

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;
  }
};

My 2nd et 3rd step使用相同的_stepSelect组件。它使用相同的逻辑，所以我使用相同的组件。

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

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

如何强制卸载组件。

Answer 1

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

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

React：Switch Case / Same Component无法卸载

1 个答案: