問題 - 我第一次輸入文本時沒有字串輸出。這導致我輸入到輸出中的任何內容的最后一個字符都不會出現。為什么是這樣？
一些狀態 - 專注于name財產
const [options, setOptions] = useState({
name: '',
signOff: ''
});
輸入
<input
type="text"
placeholder="Enter first name"
name="name"
id="name"
onChange={(e) => handleNameChange(e.target.value)}
/>
輸入更改后觸發的功能
const handleNameChange = (name: string) => {
setOptions({
...options,
name
});
console.log(options);
};
鍵入“hello”后的示例控制臺輸出- 為什么屬性為空字串name？
{name: '', signOff: ''} options.tsx:17
{name: 'h', signOff: ''} options.tsx:17
{name: 'he', signOff: ''} options.tsx:17
{name: 'hel', signOff: ''} options.tsx:17
{name: 'hell', signOff: ''} options.tsx:17
uj5u.com熱心網友回復：
它的預期行為，因為 setStates 是異步的，所以當您在設定狀態變數后立即記錄它時，它會記錄以前的值，而不是更新的值
如果您只想記錄狀態更改，請console.log()移至useEffect鉤子
const handleNameChange = (name: string) => {
setOptions({
...options,
name
});
console.log(options);
};
useEffect(() => {
console.log(options);
}, [options]);
uj5u.com熱心網友回復：
您可以將選項變數作為第二個引數添加到 useEffect。這意味著在此變數的每次狀態更改中都會觸發此函式。
useEffect(() => {
console.log(options);
}, [options]);
uj5u.com熱心網友回復：
我就是這樣做的，我還沒有遇到過這樣的問題。您還可以對其他所有輸入使用相同的功能，而不僅僅是名稱。
<input
type="text"
placeholder="Enter first name"
name="name"
id="name"
onChange={handleChange}
/>
const handleChange = (e) => {
setOptions({
...options,
[e.target.name]: e.target.value
});
};
uj5u.com熱心網友回復：
在 React 中，setState 不會立即執行，而是按計劃執行。這是一個異步操作。您在setOptions通話后立即記錄狀態值。因此，一旦setOptions安排好，JS 引擎就會移動到下一行，即console.log. 這就是為什么這樣的 o/p 會被記錄。
相反，您可以在之前記錄狀態值return()。您將看到正確的狀態值。或者，您可以簡單地將其包裝在 return() 陳述句中的某個 JSX 標記中并進行測驗。
uj5u.com熱心網友回復：
你可以使用react-usestaterefnpm
const [options, setOptions, optionsRef] = useState({
name: "",
signOff: ""
});
const handleNameChange = (text) => {
setOptions({
...options,
name: text
});
console.log(optionsRef.current);
};
反應使用狀態參考
密碼箱
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/460024.html
標籤：javascript 反应
上一篇：使用標簽資料創建帶有標簽的列