有沒有更簡單的方法來重置 React 中的狀態？

Question

我的 React 應用程序有一個添加新產品的表單，每個產品都有許多屬性。 添加產品后，我將用戶重定向到保存的產品頁面，他們可以編輯任何保存的產品。 我在各州遇到了一些（不是主要的）問題。 state在某些區域編輯時會顯示其他產品屬性，因為它尚未更新。

我想清除 state 以便如果產品屬性的 state 沒有更新，它只是一個空字符串。 現在我正在這樣做：

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

這些只是正在使用的一些狀態，因此必須像這樣重置所有狀態很麻煩。 有沒有更簡單的方法？

Answer 1

您可以將 state 屬性聚合到單個 object 中，例如 class 組件的 Z9ED39E2EA931586B56A985A694ZEF。

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


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

然而， react 文檔似乎更喜歡單獨的 state 變量而不是單個 object，因為與this.setState不同，使用鈎子更新 state 變量會替換其值。