如何重置包含所有可传递可达状态的react组件？
我偶尔会有一些react组件在概念上是有状态的，我想要重置这些组件。理想的行为相当于删除旧组件并读取新的原始组件。
React提供了一个方法setState，它允许设置组件自己的显式状态，但它排除了隐式状态，如浏览器焦点和窗体状态，它还排除了其子组件的状态。捕获所有的间接状态可能是一项棘手的任务，我更愿意严格而彻底地解决它，而不是在每个新的令人惊讶的状态上玩打地鼠游戏。
有没有API或模式可以做到这一点？
编辑：我做了一个简单的例子，演示了this.replaceState(this.getInitialState())方法，并将其与this.setState(this.getInitialState())方法进行了对比：jsfiddle - replaceState更健壮。
回答 4
Stack Overflow用户
发布于 2014-02-13 17:49:20
为了确保您提到的隐式浏览器状态和子组件的状态被重置，您可以向render返回的根级组件添加一个key attribute；当它发生更改时，该组件将被丢弃并从头开始创建。
render: function() {
// ...
return <div key={uniqueId}>
{children}
</div>;
}没有快捷方式可以重置单个组件的本地状态。
Stack Overflow用户
发布于 2019-01-26 01:59:27
向需要重新初始化的元素添加key属性，将在每次与该元素关联的props或state更改时重新加载它。
新日期{
key=().getTime()}
下面是一个示例：
render() {
const items = (this.props.resources) || [];
const totalNumberOfItems = (this.props.resources.noOfItems) || 0;
return (
<div className="items-container">
<PaginationContainer
key={new Date().getTime()}
totalNumberOfItems={totalNumberOfItems}
items={items}
onPageChange={this.onPageChange}
/>
</div>
);
}Stack Overflow用户
发布于 2016-01-27 01:45:04
实际上，您应该避免使用replaceState，而应该使用setState。
文档说，replaceState“可能会在React的未来版本中被完全删除”。我认为它肯定会被删除，因为replaceState并不真正符合React的哲学。它有助于使React组件开始感觉像瑞士刀一样。这不利于React组件的自然增长，使其变得更小，更有针对性。
在React中，如果你不得不在泛化或专门化上犯错误:目标是专门化。作为推论，组件的状态树应该具有一定的简洁性(但是，如果您正在搭建一个全新的新产品，那么打破这一规则是很有品味的)。
不管怎么说，这就是你要做的。与上面Ben的(接受的)答案类似，但如下所示：
this.setState(this.getInitialState());另外(就像Ben也说过的)为了重置“浏览器状态”，你需要删除那个DOM节点。利用vdom的强大功能，为该组件使用新的key道具。新呈现器将批量替换该组件。
参考：https://facebook.github.io/react/docs/component-api.html#replacestate
https://stackoverflow.com/questions/21749798
复制相似问题