我想知道的是，有沒有什么方法/技術可以替代多 useState() hook合一hook。
喜歡，
const [firstName, setFirstName] = useState('');
const [email, setEmail] = useState('');
const [age, setAge] = useState('');
const [people, setPeople] = useState([]);
我們不是一次又一次地寫整個事情，而是定義它們中的任何一個。
uj5u.com熱心網友回復：
您可以使用useReducer鉤子代替useState
這是他們的官方檔案useReducer
uj5u.com熱心網友回復：
您可以創建一個狀態物件并使用它。
注意：設定狀態時，請確保與之前的狀態合并。不要只是打電話setState("abc");
const [state, setState] = useState({ firstName: "", email: "" });
// somewhere in your code, This is important
setState((pre) => ({ ...pre, firstName: "John", email: "[email protected]" }));
uj5u.com熱心網友回復：
不，沒有任何方法可以使用單個useState. 除非你想將你的狀態作為一個單獨的物件來管理，你可以像這樣定義
const [state, setState] = useState({
// key: value
});
將每個州與其他州分開是有好處的。或者您可以簡單地使用class組件而不是functional組件，您可以在單個物件中管理所有狀態
順便說一句，這為每個狀態屬性更新帶來了某種頭暈，您必須依賴它spread operator來避免用單個值而不是具有屬性的物件替換整個物件
uj5u.com熱心網友回復：
這可能是實作目標的一種可能解決方案：
const [myObject, setMyObject] = useState({
firstName: '',
email: '',
age: '',
people: []
});
此外，當需要更新變數中的任何道具時，這樣的事情可能會有所幫助：
const updateMyObject = (propName, propValue) => setMyObject(
prev => ({
...prev,
[propName]: propValue
})
);
并且，可以像這樣呼叫更新：
<input
id="firstName"
value={myObject.firstName}
onChange={(e) => updateMyObject('firstName', e.target.value)}
/>
注意事項：
- 使用這種方法不是我個人的偏好/選擇
- 更新時請謹慎行事，
people因為它是一個陣列。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/439775.html
標籤：javascript 反应
上一篇：有條件地傳遞傳播物件作為道具