如何解决反应类型错误:无法读取未定义的属性“id”
从“orders”组件发送一个订单id到“update”组件。然后尝试更新包含 id 的订单的“状态”。
在控制台中记录 id 值有效,但不能使用它设置状态。
“更新”组件:
const UpdateStatus = (props) => {
const location = useLocation();
const [orderId,setorderId] = useState(null);
const [status,setStatus] = useState("pending");
useEffect(() => {
setorderId(location.state.id); // errors here
console.log(location.state.id) // but gives a valid id
},[location]);
const handleChange = e => {
setStatus(e.target.value);
console.log(e.target.value)
}
const history = useHistory();
const handleClick = () => {
if (orderId){
axios.patch(`http://localhost:5000/orders/change-status/${orderId}`,{status: status},{withCredentials: true})
.then((res) => {
console.log(res);
history.push("/get-orders");
})
}
}
return (
<div>
<h2> Update Order Status </h2>
<form>
<label>Change status to: </label>
<select name="status" id="order-status" onChange={handleChange}>
<option value="pending">Pending</option>
<option value="accepted">Accepted</option>
<option value="delivered">Delivered</option>
</select>
<br/><br/>
<input type="submit" value="Submit" onClick={handleClick}/>
</form>
</div>
);
}
“订单”组件:
const handleClick = orderId => {
history.push({
pathname: '/update-status',state: { id: orderId }
});
}
解决方法
尝试类似:
useEffect(() => {
if(location?.state?.id)
setOrderId(location.state.id);
},[location?.state?.id]);
,
试试这个:
useEffect(() => {
setOrderId(location.state?.id);
..........
},[location]);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。