我偶尔会有一些我想重置的概念上有状态的 React 组件。理想的行为相当于删除旧组件并读取新的原始组件。
React 提供了一种方法setState，允许设置组件自己的显式状态，但不包括浏览器焦点和表单状态等隐式状态，并且也不包括其子项的状态。捕捉所有这些间接状态可能是一项棘手的任务，我更愿意严格而完整地解决它，而不是在每一个新的令人惊讶的状态下玩打地鼠。
是否有 API 或模式可以做到这一点？
编辑： 我做了一个简单的例子来演示该this.replaceState(this.getInitialState())方法并将其与方法进行对比this.setState(this.getInitialState())：jsfiddle -replaceState更健壮。
为确保您提到的隐式浏览器状态和子项的状态被重置，您可以向由;返回的根级组件添加一个key属性render；当它发生变化时，该组件将被丢弃并从头开始创建。
render: function() {
// ...
return <div key={uniqueId}>
{children}
</div>;
}
重置单个组件的本地状态没有捷径。
向key需要重新初始化的元素添加属性，将在每次更改props或state关联到元素时重新加载它。
键={新日期().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>
);
}
您实际上应该避免replaceState并使用它setState。
文档说replaceState“可能会在 React 的未来版本中完全删除”。我认为它肯定会被删除，因为replaceState它并不真正符合 React 的哲学。它有助于让 React 组件开始感觉有点瑞士刀。这不利于 React 组件的自然增长，使其变得更小、更有针对性。
在 React 中，如果你必须在泛化或专业化上犯错：瞄准专业化。作为推论，你的组件的状态树应该有一定的简约性（如果你正在搭建一个品牌打屁股的新产品，那么优雅地打破这个规则是很好的）。
无论如何，这就是你的方式。类似于上面 Ben 的（已接受）答案，但像这样：
this.setState(this.getInitialState());
另外（就像 Ben 也说的）为了重置“浏览器状态”，您需要删除该 DOM 节点。利用 vdom 的力量并key为该组件使用新props。新渲染将批发替换该组件。
参考：https : //facebook.github.io/react/docs/component-api.html#replacestate
key向元素添加属性并从父元素控制其值的方法可以正常工作。以下是如何使用组件重置自身的示例。
键在父元素中控制，但更新键的函数作为props传递给主元素。这样，重置表单的按钮可以驻留在表单组件本身中。
const InnerForm = (props) => {
const { resetForm } = props;
const [value, setValue] = useState('initialValue');
return (
<>
Value: {value}
<button onClick={() => { setValue('newValue'); }}>
Change Value
</button>
<button onClick={resetForm}>
Reset Form
</button>
</>
);
};
export const App = (props) => {
const [resetHeuristicKey, setResetHeuristicKey] = useState(false);
const resetForm = () => setResetHeuristicKey(!resetHeuristicKey);
return (
<>
<h1>Form</h1>
<InnerForm key={resetHeuristicKey} resetForm={resetForm} />
</>
);
};