我有以下几点:
const [type, settype] = useState('')
let handleTypeChange = (e) => {
settype(e.target.value)
console.log(type)
}
return (
<div >
<select onChange={handleTypeChange}>
<option value="⬇️ Select a type ⬇️"> -- Select a type -- </option>
{types.map((type) => <option value={type.Id}>{type.name}</option>)}
</select>
</div>
);
}
export default Type;
字符串
问题是,当我检查控制台时,控制台中没有任何内容。由于react中的异步,它还没有设置变量,如果我第二次选择另一个值,我可以看到一个值。
我甚至尝试了settype(x => type),仍然不起作用。
如果我调用settype,我如何确保值“type”立即更新?
更新日期:
Componenet B
function goToPage(url) {
window.location.href = url;
}
const gotopage = (event) => {
goToPage(`/Details?Id=${custId}`)
};
Component A (Details.jsx page)
const [custId, setcustId] = useState('');
useEffect(() => {
const queryParameters = new
URLSearchParams(window.location.search)
const custId = queryParameters.get("custId")
if (custId) {
setcustId(x => custId)
getDetails()
}
}, [])
const getDetails = () => {
if (custId != null)
{
getUser();
}
}
const getUser = () => {
service.getUser(custId)
.then(function (result) {
//...do stuff with the result
});
};
型
当它到达getUser时,custId中的值为空。我如何确保这里的值是从调用页面更新的?
2条答案
按热度按时间wsxa1bj11#
在React中,像
useState
这样的函数的状态更新是异步的。当你调用settype(e.target.value)
时,React不会立即更新状态变量类型。状态更新是排队的,React会将其调度到以后处理。所以,当你在调用settype之后立即记录type时,你并没有记录更新后的值。相反,你记录的是type的当前值,这是旧值,因为状态更新还没有应用。
您可以使用
useEffect
钩子来验证:字符串
您将看到,当您从对象中选择一个值时,组件将重新呈现,因为状态已更改,您将看到类型变量的正确值。
基本上,您的代码是正确的,您只是不应该期望立即记录
type
变量并查看更新的值。c6ubokkw2#
您可以使用useEffect钩子和“type”依赖项来记录更新的值,而不是将其写入到DataTypeChange函数中。
字符串