Невозможно прочитать состояния в Redux с помощью React Hooks, Невозможно прочитать свойство '_id' из null - PullRequest
Новая
       5

Невозможно прочитать состояния в Redux с помощью React Hooks, Невозможно прочитать свойство '_id' из null

0 голосов
/ 11 марта 2020

У меня есть веб-приложение MERN, которое я изучаю в React Hooks.

Что я пытаюсь сделать: Доступ к состояниям в моем Redux.

Когда я обновляю sh страницу , ошибка: TypeError: Cannot read property '_id' of null

Я не могу получить к ней доступ, когда я четко вижу состояния в своем разработчике Redx инструменты. Я пытался console.log(auth.isAuthenicated), но он возвращает null. Однако, когда я делаю console.log(auth), он возвращает [object,object]. Что смущает меня, потому что я не могу попасть внутрь.

В настоящее время я занимаюсь исследованиями и буду изучать реакцию-упорство. Мне было интересно, сможет ли кто-нибудь помочь мне с моей проблемой, не реагируя на это, или объяснить, почему это может быть хорошей идеей - использовать ее.

Мой редукс: 

token(pin):"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjVlNDFmYTNhOWIwZjk0NmU5N2Q5MmY4MiIsImlhdCI6MTU4Mzk0NzA5MSwiZXhwIjoxNTgzOTUwNjkxfQ.pysX20n4cxKK5NqcXPosIejSvCN3pbcSNpQvEOX9kBE"
isAuthenticated(pin):true
isLoading(pin):false
_id(pin):"5e41fa3a9b0f946e97d92f82"
name(pin):"admin"
email(pin):"admin@gmail.com"
date(pin):"2020-02-11T00:50:02.183Z"
__v(pin):0

фрагменты моего кода: 

import React, { useState, useEffect } from "react";
import { TiDelete } from "react-icons/ti";
import Restaurants from "../Restaurant/Restaurants";
import NutritionalGraphs from "../D3Graphs/NutritionalGraphs";
import { connect, useDispatch, useSelector } from "react-redux";
import axios from "axios";
import { addItem, deleteItem } from "../../../actions/itemActions";
import IngredientsPredictions from "../Predictions/IngredientsPredictions";
import { loadUser } from "../../../actions/authActions";

import { createSelector } from "reselect";

const UserProfile = props => {
  const dispatch = useDispatch();

  const [newUserFavorite, setNewUserFavorite] = useState("");
  const [favArray, setFavArray] = useState([]);
  const tokenRecognized = useSelector(state => state.auth.token);

  // const userID = useSelector(state => state.auth.user._id);
  const auth = useSelector(state => state.auth);

  const userStates = createSelector();
  // name
  // name => props.auth.user.name,
  // userID => props.auth.user._id
  // foodFavoritesArray => foodFavoritesArray.state.item.items

  useEffect(() => {
    dispatch(loadUser(tokenRecognized));
    // console.log(userStates.userID);
    console.log(auth.isAuthenicated);

    axios
      // .get(`/api/items/item/${userStates.userID}`)
      .get(`/api/items/item/${auth.user._id}`)
      .then(res => {
        return res.data;
      })
      .then(json => {
        setFavArray(json);
      })
      .catch(err => console.log(err));
  }, [userStates.userID]);
  console.log(favArray);

он ломается в: .get(`/api/items/item/${auth.user._id}`):

Большое спасибо за читать.

1 Ответ

0 голосов
/ 11 марта 2020

Вам нужно дождаться завершения действия loadUser, прежде чем вы сможете получить доступ к данным. Я предполагаю, что это делает асин c запрос. Это нужно сделать в два этапа: 

useEffect(() => {
    // fetch user data when component mounts
    dispatch(loadUser(tokenRecognized)); 
}, []);

useEffect(() => {
    // check if user has been fetched (will not be the case on mount)
    if (auth.user) {
        axios
        .get(`/api/items/item/${auth.user._id}`)
        .then(res => {
            return res.data;
        })
        .then(json => {
            setFavArray(json);
        })
        .catch(err => console.log(err));
    }
}, [auth.user]); // perform this when `auth.user` changes
...