我正在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时,不会重置我的本地状态。
我如何强制卸载该组件。
最佳答案
我建议首先尝试向此函数中正在渲染的每个元素添加键。我看到了React无法分辨要渲染的组件之间的区别的问题,因此它跳过了一些生命周期事件,而直接跳过了渲染。
<Product key="process-step-product"/>