我正在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组件也不会在步骤12之间卸载。

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

我如何强制卸载该组件。

最佳答案

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

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

10-05 21:04
查看更多