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

b09cbbtk 于 2023-11-15 发布在 Java

关注(0)|答案(2)|浏览(130)

我的React应用程序有一个表单来添加新产品，每个产品都有一些属性。当产品被添加时，我将用户重定向到已保存的产品页面，他们可以编辑任何已保存的产品。我遇到了一些（不是主要的）状态问题。在编辑时，在某些区域，状态显示另一个产品属性，因为它尚未更新。
我想清除状态，这样如果一个产品属性的状态没有更新，它就只是一个空字符串。现在我这样做：

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

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

JavaScript

来源：https://stackoverflow.com/questions/73240354/is-there-an-easier-way-to-reset-states-in-react

2条答案

按热度按时间

hiz5n14c1#

您可以将状态属性聚合到单个对象中，就像类组件的状态一样。

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

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

字符串
然而，react文档似乎更喜欢单独的状态变量而不是单个对象，因为与this.setState使用钩子更新状态变量不同，它会替换其值。

赞(0）回复(0）举报 2023-11-15

vfhzx4xs2#

通常情况下，如果你需要重置状态，这表明你做错了什么。最简单的方法是使用key属性。就像<Product key={product.id} />当key改变时，我们将有一个全新的Product组件。确保你正在卸载存储一些旧数据的组件，这样，你就不需要任何重置状态。

赞(0）回复(0）举报 2023-11-15