假設有 10 個輸入欄位資料。它們需要跨越 3 個頁面，例如表單頁面、預覽頁面和確認頁面。
所以我猜資料肯定會放在 Redux 中作為 3 頁的全域資料。通常，我會在表單頁面中創建 10 個 useState 掛鉤來存盤 10 個資料/狀態并將 setState 分配給每個 onChange 道具。單擊提交按鈕后，它們將作為有效負載分派并更新到 redux 存盤中。
然而，有一天我想出了一個想法，為什么我不只將 dispatch 分配給每個 onChange 道具，因為 10 個資料最終將位于 redux 存盤中。有了這個，我不需要創建 10 個 useState 鉤子，并且覺得兩次存盤相同的資料是“冗余的”（在 useState 鉤子和 redux 存盤中）。
但這會產生另一個問題，即頻繁呼叫 redux 以使用 useSelector() 檢索最新資料并使用 useDispatch() 調度新操作。但是頻繁呼叫 redux store 應該沒什么大不了的，因為它仍然是同步的，對吧？在這一點上，我感到困惑和不確定。
因此，我想就此向 React 專家尋求建議......這是否意味著在我的情況下，僅使用 useDispatch（不是同時使用 useState 和 useDispatch）更好？
//(A) : useState useDispatch
//create 10 useState hooks to store data/states.
//They are compiled and dispatched as payload to redux on button click
<input type="text" value={value1} onChange={()=>setValue(e.target.value)} />
<input type="text" value={value2} onChange={()=>setValue(e.target.value)} />
<input type="text" value={value3} onChange={()=>setValue(e.target.value)} />
<input type="text" value={value4} onChange={()=>setValue(e.target.value)} />
<input type="text" value={value5} onChange={()=>setValue(e.target.value)} />
<input type="text" value={value6} onChange={()=>setValue(e.target.value)} />
<input type="text" value={value7} onChange={()=>setValue(e.target.value)} />
<input type="text" value={value8} onChange={()=>setValue(e.target.value)} />
<input type="text" value={value9} onChange={()=>setValue(e.target.value)} />
<input type="text" value={value10} onChange={()=>setValue(e.target.value)} />
<button onClick={handleSubmit}>Submit</button>
//(B) useDispatch only
//valueSelector1 means the value is taken from the useSelector()
<input type="text" value={valueSelector1} onChange={()=>dispatch(setValue(e.target.value))} />
<input type="text" value={valueSelector2} onChange={()=>dispatch(setValue(e.target.value))} />
<input type="text" value={valueSelector3} onChange={()=>dispatch(setValue(e.target.value))} />
<input type="text" value={valueSelector4} onChange={()=>dispatch(setValue(e.target.value))} />
<input type="text" value={valueSelector5} onChange={()=>dispatch(setValue(e.target.value))} />
<input type="text" value={valueSelector6} onChange={()=>dispatch(setValue(e.target.value))} />
<input type="text" value={valueSelector7} onChange={()=>dispatch(setValue(e.target.value))} />
<input type="text" value={valueSelector8} onChange={()=>dispatch(setValue(e.target.value))} />
<input type="text" value={valueSelector9} onChange={()=>dispatch(setValue(e.target.value))} />
<input type="text" value={valueSelector10} onChange={()=>dispatch(setValue(e.target.value))} />
<button onClick={handleSubmit}>Submit</button>
uj5u.com熱心網友回復：
我建議在 Redux 中將它們全部放在一起（一次調度），因為由于商店中的更新，可能會出現不可預測的行為。只需定義一個狀態而不是多個狀態并完成作業：
注意：name每個輸入的屬性與狀態的鍵相同。
const [state,setState] = useState({value1:"fake",..., value9:"test"})
const handleValues=(e)=>{
const {name,value} = e.target
setSate({[name]:value})
}
<input type="text" value={value1} name="value1" onChange={handleValues} />
.
.
.
<input type="text" value={value9} name="value9" onChange={handleValues} />
<button onClick={handleSubmit}>Submit</button>
uj5u.com熱心網友回復：
這兩種方法（呼叫 useState 或調度 onChange 事件）在阻塞和非阻塞 UI 執行緒方面是不同的。
useState implementation -> 每當狀態更新時，react 都會重新渲染組件，但對于頻繁的狀態更新，react 會將狀態更新排隊并在 UI 上更新。所以這是一個非阻塞的實作。
dispatch implementation雖然redux 是同步dispatch action，但是會阻塞代碼的執行，可能會增加ui在螢屏上的更新時間，也可能會導致一些意想不到的結果。
因此，您可以采用在組件中管理本地狀態的方式，并在進行中分派集體回應。這種方法還將幫助您在調度之前驗證用戶輸入。
使用狀態
const [payload,setPayload] = useState({value1:"dummy",..., value9:"dummy1"})
為 input 元素添加唯一 id
<input type="text" value={value1} id="value1" onChange={handleChange} />
實作handleChange函式
const handleChange =(e)=>{
const {id,value} = e.target
setPayload(initialState => { ...initialState, [id]:value }) //Give preference to provide the callback in place of object during setting the state
}
最后你可以將這個狀態發送到 redux store
uj5u.com熱心網友回復：
Your option A is more preferable:
1. Instead of using 10 different state/useState hooks, you should use a single state object of 10 input field data.
2. If we use useDispatch every time and call the redux store, then in that scenario, the store state will get updated. But if the user hadn't submitted that form or say user hadn't clicked submit button, then also redux data will be changed, which will create a problem.
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/391067.html
標籤：javascript 反应 形式 反应还原 反应钩子
上一篇：提交表單時對表單元素的參考為空