react组件的销毁（解决组件数据留存的问题）

最新推荐文章于 2025-05-16 11:55:42 发布

原创最新推荐文章于 2025-05-16 11:55:42 发布 · 7k 阅读

1 ·

CC 4.0 BY-SA版权

react 专栏收录该内容

8 篇文章

订阅专栏

本文探讨了在使用封装的下拉列表组件时遇到的问题：当一个组件的选择影响到另一个相同类型组件的初始值，导致组件重复渲染而未被正确销毁。文章提供了具体的代码示例，并给出了解决方案——确保组件在不再需要时被正确销毁。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
这个年龄是封装的一个下拉列表，然后因为调用的是相同的一个组件，然后当上面选择3岁的时候，在勾选下面的一开始的初值也是为3

发生这种原因是因为组件重复渲染但没有被销毁
所以只要销毁上面的那个组件即可。

  {this.state.visible ? <AtFloatLayout isOpened={true} >
                    <Selector data={this.state.age} checkedId={this.state.auditions[this.state.index].age}
                              onCancel={this.onCancelSelectAge}
                              onConfirm={this.onConfirmSelectAge} onRef={(ref) => this.typeOnRef = ref}/>
                </AtFloatLayout> : null}

isOpened={true}是控制是否渲染的
{this.state.visible ? < is={true}></> :null }
即可