React 中有没有更简单的方法来重置状态？

Question

我的 React 应用程序有一个用于添加新产品的表单，每个产品都有许多属性。添加产品后，我将用户重定向到已保存的产品页面，他们可以编辑任何已保存的产品。我遇到了一些与各州有关的（不是主要的）问题。部分区域编辑时，状态显示为其他产品属性，因为尚未更新。

我想清除状态，以便如果产品属性的状态未更新，它只是一个空字符串。现在我正在做这个：

const resetStates = () => {
    setName("");
    setDescription("");
    setPrice(null);
}   

这些只是正在使用的一些状态，因此必须像这样重置所有状态很麻烦。有没有更简单的方法？

Answer 1

您可以将状态属性聚合到单个对象中，例如类组件的状态。

[formContent, setFormContent] = useState({name:'',desc:'',price: null});


const resetStates = ()=> {
    setFormContent({name: '', desc: '', price: null});
}

然而，react 文档似乎更喜欢单独的状态变量而不是单个对象，因为与

this.setState

使用钩子更新状态变量不同，会替换其值。

Answer 2

通常，如果你需要重置状态，则表明你做错了什么。 最简单的方法是使用 key 属性。 喜欢

<Product key={product.id} />

当 key 发生变化时，我们将拥有一个全新的 Product 组件。 确保您正在卸载存储一些旧数据的组件，这样您就不需要任何重置状态。