CODEWITHSUNDEEP
javascriptreactjsreduxreact-reduxredux-toolkit
09eric09
09eric09

Reputation: 187

Losing state data on page refresh 'Cannot read properties of undefined'

I am fetching all teams from an API in my App.js file and storing all the fetched teams in an array, the state is managed by Redux.

Here is my App.js where i use the getTeams() function to send the teams to Redux.

import React, {useEffect} from 'react';
import { Route, Switch } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { teamActions } from './store/team-slice';
import Header from './components/layout/Header';
import Footer from './components/layout/Footer';
import Teams from './components/pages/Teams';
import Home from './components/pages/Home';
import TeamInfo from './components/pages/TeamInfo';

const App = ()=> {
const dispatch = useDispatch();
const getTeams = () => {
    fetch(`https://www.balldontlie.io/api/v1/teams`)
    .then(res => res.json())
    .then(data => dispatch(teamActions.sortTeams(data.data)));
    }
  
    useEffect(() => {
    getTeams();
    }, []);

  return (
    <>
      <Header/>
      <Switch>
        <Route exact path={'/'} component={Home}></Route>
        <Route exact path={'/teams'} component={Teams}></Route>
        <Route exact path={'/team/:teamName'} component={TeamInfo}></Route>
      </Switch>
      <Footer/>
    </>
  );
}

export default App;

In Redux I store the teams in an array called totalTeams:

import { createSlice } from "@reduxjs/toolkit";

const teamInitialState = {totalTeams: [], easternTeams:[], westernTeams:[]};

const teamSlice = createSlice({
    name: 'team',
    initialState: teamInitialState,
    reducers: {
        sortTeams(state, action){
            state.totalTeams = action.payload;
            state.westernTeams = action.payload.filter(team => team.conference === 'West');
            state.easternTeams = action.payload.filter(team => team.conference === 'East');
        }
    }
});

export const teamActions = teamSlice.actions;
export default teamSlice;

I then have a "Team Info" page where I take the team name from the url using useParams to filter out the current team from the redux array of totalTeams.

I then use that data to fill the page with the team info, everything works until I refresh the page, I then lose all data.

Shouldn't all the data still be there since I am using the Redux array to find the team info? The fetch to the API is made on every page reload and the data is saved to the array so why am I losing state?

import React from 'react';
import { useSelector } from 'react-redux';
import { useParams } from 'react-router-dom';
import Container from '../layout/Container';
import classes from './TeamInfo.module.css'

const TeamInfo = () => {
  const teams = useSelector(state => state.team.totalTeams);
  const params = useParams();
  const teamSlug = params.teamName;
  const teamNoDashes = teamSlug.replace(/-/g, ' ');
  const currentTeam = teams && teams.find(team => team.full_name.toLowerCase() === teamNoDashes);

  return (
    <Container>
      <div className={classes['team-info-container']}>
        <div><img src={`/img/team-logos-grid/${teamSlug}.png`} alt={teamSlug} /></div>
        <div>
          <h2>{currentTeam.full_name}</h2>
          <ul>
            <li>City: {currentTeam.city}</li>
            <li>Division: {currentTeam.division}</li>
            <li>Conference: {currentTeam.conference}</li>
          </ul>
        </div>
      </div>
    </Container>
  )
}

export default TeamInfo;

Upvotes: 2

Views: 443

Answers (1)

1harshh
1harshh

Reputation: 41

First you need check exist of data, and then fields in this object:

loading || (data && (!data.me || !data.getPlaces)) ? ...

Upvotes: 1

Related Questions