我正在尝试使用reactjs制作一个Web应用程序，但遇到了这个错误......我正在尝试在产品卡上添加一个“喜欢”按钮，如果用户喜欢该产品，“喜欢”按钮将被填充。当我已经在localhost上的页面上并更改代码时（立即更新，因为我正在使用Nodemon）更改显示出来，工作正常。但是，一旦我刷新页面，或者如果我尝试在更改存在时再次打开页面，我会得到这个错误：

TypeError: Cannot read properties of undefined (reading 'includes')

下面是我的代码：

function Product(props) {
  const { product } = props;

  const { state } = useContext(Store);
  const { userInfo } = state;

  const [{ loading, user }, dispatch] = useReducer(reducer, {
    loading: false,
    user: [],
  });

  useEffect(() => {
    const fetchUser = async () => {
      dispatch({type: 'FETCHUSER_REQUEST'});
      try {
        const user = await axios.get(
          '/api/users/profile', {
            headers: {Authorization: `Bearer ${userInfo.token}`},
          }
        );
        dispatch({type: 'FETCHUSER_SUCCESS', payload: user.data});
      } catch(err) {
        dispatch({type: 'FETCHUSER_FAIL'});
        toast.error(getError(err));
      }
    }
    fetchUser();
  }, []);

  const [favourites, setFavourites] = useState([]);

  const likesHandler = async(e) => {
    e.preventDefault();
    favourites.push(product._id);
    setFavourites(favourites => [...favourites, product._id]);
      const { data } = await axios.put(
        '/api/users/likes',
        { favourites },
        {
          headers: {Authorization: `Bearer ${userInfo.token}`},
        }
      );
  };

  console.log(user);
  console.log(user.favourites);

  return (
    <Card styles="1px solid grey">
      <Link to={`/product/${product.slug}`}>
        <img src={product.image} className="card-img-top" alt={product.name} />
      </Link>
      <Card.Body>
        <Link to={`/product/${product.slug}`}>
          <Card.Title>{product.name}</Card.Title>
        </Link>
        <Rating rating={product.rating} numReviews={product.numReviews} />
        <Card.Text>${product.price}</Card.Text>
        {product.stock === 0 ? (
          <Button variant="light" disabled>
            Out of stock
          </Button>
        ) : (
          <Button onClick={() => addToCartHandler(product)}>Add to cart</Button>
        )}
      </Card.Body>

      {user.favourites.includes(product._id) ? (
        <i class="fas fa-heart fa-lg card-icon-btm"></i>
      ) : (
        <span onClick={likesHandler}>
          <i class="far fa-heart fa-lg card-icon-btm"></i>
        </span>
      )}

    </Card>
  );
}
export default Product;

我的API代码：

userRouter.get(
  '/profile',
  isAuth,
  expressAsyncHandler(async (req, res) => {
    const user = await User.findById(req.user._id);
    res.send(user);
  })
);

userRouter.put(
  '/likes',
  isAuth,
  expressAsyncHandler(async(req, res) => {
    const user = await User.findById(req.user._id);

    if (user) {
      user.favourites.push(req.body.favourites[0])
    }
    await user.save();
  })
);

型
刷新后，console.log（user）将返回空，user.favourites将返回undefined。我知道这可能是我的用户数据填充方式的问题，但我不知道是什么问题...我在代码开始时填充用户。如果有人知道问题可能是什么，将非常感激！