我正在嘗試更改組件的狀態，但它會繼續呈現以前的狀態。
據我了解，組件是在保存狀態之前渲染的，我需要使用回呼函式，除了我沒有成功。
這是我正在嘗試做的簡化代碼：
export default function ColorPick() {
const [color, setColor] = useState('');
const [choice, setChoice] = useState('blue');
const handleColor = (event, newChoice) => {
setChoice(newChoice)
if(choice === 'blue'){
setColor('blue')
}else{
setColor('red')
}
};
return (
<select onChange={handleColor} value={choice}>
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
<h1>{color}</h1>
);
}
謝謝
uj5u.com熱心網友回復：
您可以只使用event回傳所選值的引數。然后你的handleColor會看起來像這樣
const handleColor = (event) => {
console.log(event.target.value);
if (event.target.value === "blue") {
setColor("blue");
} else {
setColor("red");
}
};
<select onChange={handleColor}>
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
<h1>{color}</h1>
那么你也不需要使用選擇狀態
代碼沙盒示例
uj5u.com熱心網友回復：
當您分配這樣的onChange方法時，組件 ( <select>) 只向它發送事件引數。如果您除錯您的handleColor方法，您將看到newChoice引數始終未定義。
您可以訪問 select 的當前值，event.target.value甚至可以完全擺脫選擇鉤子。
function ColorPick() {
const [color, setColor] = useState("")
const handleColor = (event) => {
setColor(event.target.value)
}
return (
<>
<select onChange={handleColor}>
<option value='red'>Red</option>
<option value='blue'>Blue</option>
</select>
<h1>{color}</h1>
</>
)
}
uj5u.com熱心網友回復：
useState是異步的，因此您無法choice在函式中訪問新值handleColor，此外 yan 無法在您的函式中訪問 newChoice，因為您不傳遞任何引數，您的 handleColor 函式僅接收事件作為回呼引數。在您的情況下，您可以擺脫choice并setChoice喜歡這樣
const {useState} = React
function ColorPick() {
const [color, setColor] = useState('blue');
const handleColor = (event) => {
setColor(event.target.value)
};
return (
<>
<select onChange={handleColor} value={color}>
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
<h1>{color}</h1>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<>
<ColorPick />
</>
);<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script
crossorigin
src="https://unpkg.com/react@18/umd/react.production.min.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
></script>
<div id="root"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/475014.html