首页 > 解决方案 > 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> 
    ) 
}

标签: reactjsaxiosreact-hooks

解决方案


只有在 userData 中定义了属性 user 时才发出请求。

您可以添加一个将在 userData 更改时执行的 useEffect 然后发出请求,例如:

useEffect(() => {
  if (userData.user) {
    axios.get(`http://localhost:5000/reviews/reviews?email=${userData.user.email}`)
  }
}, [userData]);

推荐阅读