是否有任何 function 可用於使用 React Js Hook 查看新更新的數組 state？
[英]Is there any function to use to see the new updated array state using React Js Hook?
問題描述
我有關於使用 Effect Hook 的問題，現在我有模塊，當我點擊按鈕時，它會自動添加 5 個新數組，所以每一行都有 onChange 這可能正在工作。 然而，當我控制台記錄 state 仍然沒有效果，但在我看來已經生效。
問題：為什么我的 state 仍然是 5 但我桌子上的行已經 10..
這是示例 output：
如您所見，我已經有 10 行，因為我已經添加了新行，但默認情況下只有 5 行。 但是當我控制台它登錄到我的 onchange 處理程序內部時，state 只有 5 個，當我控制台日志 state 時沒有反射發生。
根據我的研究，我需要使用 React Hook Effects，但是如何在 Hooks Effect 中使用呢？ 我將向你們展示我創建的示例代碼。
這里默認5默認state：
const [data, setData] = useState([{
key: "1",
customer: <select className="form-control" name="customer" onChange={(e,i) => handleInputChange(e,0)} >
<option key="0" disabled selected>Select Customer</option>
<option key="1">LEXI INC / joseph</option>
<option key="1">LEXI INC / james</option>
<option key="1">LEXI INC / charlie</option>
<option key="1">LEXI INC / pam</option>
<option key="1">LEXI INC / regorio</option>
</select>,
bank: <select className="form-control" name="bank" onChange={(e,i) => handleInputChange(e,0)}>
<option key="0" disabled selected>Select Bank</option>
<option key="1">BDO</option>
<option key="1">MAY BANK</option>
<option key="1">EAST WEST BANK</option>
<option key="1">UNION BANK</option>
<option key="1">BPI</option>
</select>,
branch: <input className="form-control" placeholder="Branch" name="branch" onChange={(e,i) => handleInputChange(e,0)}/>,
checkNo: <input type="number" className="form-control" name="checkNo" placeholder="Check No." onChange={(e,i) => handleInputChange(e,0)}/>,
checkDate: <input type="date" name="checkDate" className="form-control" onChange={(e,i) => handleInputChange(e,0)}/>,
amount: <input
name="amount"
className="form-control"
placeholder="Amount"
onChange={(e,i) => handleInputChange(e,0)}
/>,
remarks: <select className="form-control" name="remarks" onChange={(e,i) => handleInputChange(e,0)}>
<option key="0" disabled selected>Select Remarks</option>
<option key="1">Test</option>
</select>,
},
{
key: "2",
customer: <select className="form-control" name="customer" onChange={(e,i) => handleInputChange(e,1)}>
<option key="0" disabled selected>Select Customer</option>
<option key="1">LEXI INC / james</option>
<option key="1">LEXI INC / charlie</option>
<option key="1">LEXI INC / pam</option>
<option key="1">LEXI INC / regorio</option>
</select>,
bank: <select className="form-control" name="bank" onChange={(e,i) => handleInputChange(e,1)}>
<option key="0" disabled selected>Select Bank</option>
<option key="1">BDO</option>
<option key="1">MAY BANK</option>
<option key="1">EAST WEST BANK</option>
<option key="1">UNION BANK</option>
<option key="1">BPI</option>
</select>,
branch: <input className="form-control" placeholder="Branch" name="branch" onChange={(e,i) => handleInputChange(e,1)}/>,
checkNo: <input type="number" className="form-control" name="checkNo" placeholder="Check No." onChange={(e,i) => handleInputChange(e,1)}/>,
checkDate: <input type="date" name="checkDate" className="form-control" onChange={(e,i) => handleInputChange(e,1)}/>,
amount: <input
name="amount"
className="form-control"
placeholder="Amount"
onChange={(e,i) => handleInputChange(e,1)}
/>,
remarks: <select className="form-control" name="remarks" onChange={(e,i) => handleInputChange(e,1)}>
<option key="0" disabled selected>Select Remarks</option>
<option key="1">Test</option>
</select>,
},
{
key: "3",
customer: <select className="form-control" name="customer" onChange={(e,i) => handleInputChange(e,2)}>
<option key="0" disabled selected>Select Customer</option>
<option key="1">LEXI INC / james</option>
<option key="1">LEXI INC / charlie</option>
<option key="1">LEXI INC / pam</option>
<option key="1">LEXI INC / regorio</option>
</select>,
bank: <select className="form-control" name="bank" onChange={(e,i) => handleInputChange(e,2)}>
<option key="0" disabled selected>Select Bank</option>
<option key="1">BDO</option>
<option key="1">MAY BANK</option>
<option key="1">EAST WEST BANK</option>
<option key="1">UNION BANK</option>
<option key="1">BPI</option>
</select>,
branch: <input className="form-control" placeholder="Branch" name="branch" onChange={(e,i) => handleInputChange(e,2)}/>,
checkNo: <input type="number" className="form-control" name="checkNo" placeholder="Check No." onChange={(e,i) => handleInputChange(e,2)}/>,
checkDate: <input type="date" name="checkDate" className="form-control" onChange={(e,i) => handleInputChange(e,2)}/>,
amount: <input
name="amount"
className="form-control"
placeholder="Amount"
onChange={(e,i) => handleInputChange(e,2)}
/>,
remarks: <select className="form-control" name="remarks" onChange={(e,i) => handleInputChange(e,2)}>
<option key="0" disabled selected>Select Remarks</option>
<option key="1">Test</option>
</select>,
},
{
key: "4",
customer: <select className="form-control" name="customer" onChange={(e,i) => handleInputChange(e,3)}>
<option key="0" disabled selected>Select Customer</option>
<option key="1">LEXI INC / james</option>
<option key="1">LEXI INC / charlie</option>
<option key="1">LEXI INC / pam</option>
<option key="1">LEXI INC / regorio</option>
</select>,
bank: <select className="form-control" name="bank" onChange={(e,i) => handleInputChange(e,3)}>
<option key="0" disabled selected>Select Bank</option>
<option key="1">BDO</option>
<option key="1">MAY BANK</option>
<option key="1">EAST WEST BANK</option>
<option key="1">UNION BANK</option>
<option key="1">BPI</option>
</select>,
branch: <input className="form-control" placeholder="Branch" name="branch" onChange={(e,i) => handleInputChange(e,3)}/>,
checkNo: <input type="number" className="form-control" name="checkNo" placeholder="Check No." onChange={(e,i) => handleInputChange(e,3)}/>,
checkDate: <input type="date" name="checkDate" className="form-control" onChange={(e,i) => handleInputChange(e,3)}/>,
amount: <input
name="amount"
className="form-control"
placeholder="Amount"
onChange={(e,i) => handleInputChange(e,3)}
/>,
remarks: <select className="form-control" name="remarks" onChange={(e,i) => handleInputChange(e,3)}>
<option key="0" disabled selected>Select Remarks</option>
<option key="1">Test</option>
</select>,
},
{
key: "5",
customer: <select className="form-control" name="customer" onChange={(e,i) => handleInputChange(e,4)}>
<option key="0" disabled selected>Select Customer</option>
<option key="1">LEXI INC / james</option>
<option key="1">LEXI INC / charlie</option>
<option key="1">LEXI INC / pam</option>
<option key="1">LEXI INC / regorio</option>
</select>,
bank: <select className="form-control" name="bank" onChange={(e,i) => handleInputChange(e,4)}>
<option key="0" disabled selected>Select Bank</option>
<option key="1">BDO</option>
<option key="1">MAY BANK</option>
<option key="1">EAST WEST BANK</option>
<option key="1">UNION BANK</option>
<option key="1">BPI</option>
</select>,
branch: <input className="form-control" placeholder="Branch" name="branch" onChange={(e,i) => handleInputChange(e,4)}/>,
checkNo: <input type="number" className="form-control" name="checkNo" placeholder="Check No." onChange={(e,i) => handleInputChange(e,4)}/>,
checkDate: <input type="date" name="checkDate" className="form-control" onChange={(e,i) => handleInputChange(e,4)}/>,
amount: <input
name="amount"
className="form-control"
placeholder="Amount"
onChange={(e,i) => handleInputChange(e,4)}
/>,
remarks: <select className="form-control" name="remarks" onChange={(e,i) => handleInputChange(e,4)}>
<option key="0" disabled selected>Select Remarks</option>
<option key="1">Test</option>
</select>,
}])
const [list, setList] = useState(data);
按鈕 當我點擊它時它會添加新的 5 行：
<button type="submit" class="btn btn-danger" onClick={() => addRows()}>Add Row</button>
添加行 Function：
const addRows = () => {
//loop here the keys listed
let initialKey = 0;
const x = data.slice(-1);
initialKey = parseInt(x[0]['key']);
let newArr=[...Array(5)].map((_,i)=>{
let val=i + 1 +initialKey;
return {
key: ""+val+"",
customer: <select className="form-control" name="customer" onChange={(e,i) => handleInputChange(e,val)}>
<option key="0" disabled selected>Select Customer</option>
<option key="6">LEXI INC / joseph</option>
<option key="6">LEXI INC / james</option>
<option key="6">LEXI INC / charlie</option>
<option key="6">LEXI INC / pam</option>
<option key="6">LEXI INC / regorio</option>
</select>,
bank: <select className="form-control" name="bank" onChange={(e,i) => handleInputChange(e,val)}>
<option key="0" disabled selected>Select Bank</option>
<option key="6">BDO</option>
<option key="6">MAY BANK</option>
<option key="6">EAST WEST BANK</option>
<option key="6">UNION BANK</option>
<option key="6">BPI</option>
</select>,
branch: <input className="form-control" placeholder="Branch" name="branch" onChange={(e,i) => handleInputChange(e,val)}/>,
checkNo: <input type="number" className="form-control" name="checkNo" placeholder="Check No." onChange={(e,i) => handleInputChange(e,val)}/>,
checkDate: <input type="date" name="checkDate" className="form-control" onChange={(e,i) => handleInputChange(e,val)}/>,
amount: <input
name="amount"
className="form-control"
placeholder="Amount"
onChange={(e,i) => handleInputChange(e,val)}
/>,
remarks: <select className="form-control" name="remarks" onChange={(e,i) => handleInputChange(e,val)}>
<option key="0" disabled selected>Select Remarks</option>
<option key="6">Test</option>
</select>
}
});
setData([...data,...newArr])
}
這是OnChange的function
const handleInputChange = (e, i) => {
console.log(i);
const { name, value } = e.target;
const list = [...data];
console.log(list);
const x = list[i];
// const x = list[i][name] = value;
console.log(x)
}
Output Onchange：根據日志，state 僅為 5。
2 個解決方案
解決方案1
0 2021-06-21 06:27:30
你可以試試這個：
useEffect(() => {
setTimeout(()=>{
setData(yourDataArray)
}, 1000)
}, [])
解決方案2
0 2021-06-21 06:53:55
useEffect(() => {
// this will get run whenever `data` changes
console.log("data" , data)
}, [data])
問你一個問題：你為什么把你的用戶界面放在 state 里面？
使用 React useState 鈎子時無法獲取更新的 state
[英]Unable to get the updated state when using React useState hook
當狀態更新 React JS 時，Map 函數不會呈現新元素
[英]Map function won't render new element when state is updated React JS
React Native：不能使用 function 作為默認 state 鈎子？ 數組計算和緩慢的 UI 問題
[英]React Native: cannot use function as default state hook? issue with array computation and slow UI
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
反應功能不使用更新狀態
如何在反應狀態鈎子上使用map函數
使用 React useState 鈎子時無法獲取更新的 state
使用 React 中的 useState 鈎子將數組插入 state
State 沒有被 React 的 state 鈎子更新？
當狀態更新 React JS 時，Map 函數不會呈現新元素
React Native：不能使用 function 作為默認 state 鈎子？ 數組計算和緩慢的 UI 問題
React Hook 新手，為什么使用一次后狀態未定義？
React Hook的狀態未更新
如果 Hook State 被子組件更新，則進行反應測試
相關標簽