如何重置包含所有可传递状态的反应组件？

我偶尔会有一些反应组件，它们在概念上是有状态的，我想重新设置它们。理想的行为相当于删除旧组件并读取一个新的、原始的组件。

React 提供了一种方法 setState，该方法允许设置组件自己的显式状态，但排除了浏览器焦点和窗体状态等隐式状态，同时也排除了其子级的状态。捕捉所有这些间接状态可能是一项棘手的任务，我更愿意严格而彻底地解决它，而不是用每一个新的令人惊讶的状态来玩打地鼠游戏。

是否有一个 API 或模式来做到这一点？

编辑: 我做了一个简单的示例来演示 this.replaceState(this.getInitialState())方法，并将其与 this.setState(this.getInitialState())方法进行对比: Jsfiddle-replaceState更加健壮。

103923 次浏览
小开
最佳答案

为了确保您提到的隐式浏览器状态和子级状态被重置，您可以向 render返回的根级组件添加 key属性; 当它发生变化时，该组件将被丢弃并从头创建。

render: function() {
// ...
return <div key={uniqueId}>
{children}
</div>;
}

没有重置单个组件的本地状态的快捷方式。

小开

实际上，应该避免使用 replaceState，而是使用 setState。

医生说 replaceState“可能在未来的 React 版本中被完全移除。”我认为它肯定会被删除，因为 replaceState并不真正与反应的哲学摇摆不定。它有助于使反应组件开始感觉有点瑞士刀的感觉。 这与反应组件的自然增长相抵触，使其变得更小，更有针对性。

在反应中，如果你必须在一般化或专业化上犯错误: 以专业化为目标。作为一个必然结果，组件的状态树应该有一定的节俭(如果您正在构建一个全新的产品，那么有品味地打破这个规则是可以的)。

无论如何，这就是你要做的。类似于本(接受)上面的答案，但是像这样:

this.setState(this.getInitialState());

还有(就像 Ben 说的)为了重置“浏览器状态”，你需要删除那个 DOM 节点。利用电源的力量，并使用一个新的 key支柱的组成部分。新的渲染将完全取代该组件。

参考资料: https://facebook.github.io/react/docs/component-api.html#replacestate

小开

向需要重新初始化的元素添加一个 key属性，将在每次 props或 state关联到元素更改时重新加载它。

Key = { new Date () . 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>
);
}
小开

向元素添加 key属性并从父元素控制其值的方法可以正常工作。下面是如何使用组件重置自身的示例。

键在父元素中被控制，但是更新键的函数作为一个道具传递给主元素。这样，重置表单的按钮就可以驻留在表单组件本身中。

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} />
</>
);
};
小开

也许你可以使用表单的方法复位() :

import { useRef } from 'react';


interface Props {
data: string;
}


function Demo(props: Props) {
const formRef = useRef<HTMLFormElement | null>(null);


function resetHandler() {
formRef.current?.reset();
}


return(
<form ref={formRef}>
<input defaultValue={props.data}/>
<button onClick={resetHandler}>reset</button>
</form>
);
}
小开

示例代码(成功提交后重置 MyFormComponent及其状态) :

function render() {
const [formkey, setFormkey] = useState( Date.now() )


return <>
<MyFormComponent key={formkey} handleSubmitted={()=>{
setFormkey( Date.now() )
}}/>
</>
}

提交答案