reactjs - React on page reload receive error TypeError: Cannot read property 'X' of undefined
问题描述
当我登陆我创建的名为“反馈”的反应页面时,我会看到预期的页面显示。
但是,如果我去刷新页面,我会收到一个错误:TypeError: Cannot read property 'email' of undefined
我该如何解决这个问题?
import React, {useState, useContext} from "react";
import UserContext from "../context/UserContext";
import axios from 'axios';
const Feedback = () => {
const { userData } = useContext(UserContext);
const [review, setReview] = useState([]);
const filtersActive = () => {
setFilterMode(false);
}
axios
.get(`http://localhost:5000/reviews/reviews?email=${userData.user.email}`, userData)
.then((response) => {
console.log(response)
setReview(response.data)
});
return(
<div className='testing1234'>
{review.map(review => (
<p key={review._id}>{review.review}</p>
))}
</div>
)
}
解决方案
只有在 userData 中定义了属性 user 时才发出请求。
您可以添加一个将在 userData 更改时执行的 useEffect 然后发出请求,例如:
useEffect(() => {
if (userData.user) {
axios.get(`http://localhost:5000/reviews/reviews?email=${userData.user.email}`)
}
}, [userData]);
推荐阅读
- gulp - 使用 gulp 编译车把模板但忽略变量
- firebase - 奇怪的 Firestore 控制台情况
- c++ - 我在读取变量、比较它然后在使用循环时打印输出时遇到问题
- database - 检查并比较两个表并更新表2在访问数据库中如何可能
- postgresql - 如何使用带有函数 pgr_dijkstra 的循环
- javascript - 可点击的信息框
- spring - spring boot 数据 cassandra 反应式 JmxReporter 问题
- html - 如何通过一个渐变填充多个 svg 路径?
- nexus - 如何获取 Nexus 创建工件的日期?
- python - 我需要什么样的对象才能使用 fix_multiple_files 的 options 参数?