Strange issue when making requests/displaying data on React (Axios, React, Redux)

Question

I'm trying to make a personal app and I'm running into some issues with the requests, nothing to do with the API.

The results of the request returns this JSON: https://pastebin.com/raw/vpdq2k6S

My code:

class Home extends Component {
  componentDidMount() {
    this.props.getTrending();
  }
  render() {
    const { trending } = this.props.trending;
    console.log(trending);

    const Card = (props) => (
      <Panel {...props} bordered header='Card title'>
        {trending.results.map((i) => (
          <React.Fragment key={i.id}>
            <h6>{i.title}</h6>
          </React.Fragment>
        ))}
      </Panel>
    );
    return (
      <div className='Home'>
        <FlexboxGrid justify='center'>
          <Card />
        </FlexboxGrid>
      </div>
    );
  }
}

export default connect(
  (state) => {
    return {
      trending: state.trending,
    };
  },
  { getTrending }
)(Home);

My action:

import { GET_TRENDING } from "../types";
import axios from "axios";

export const getTrending = () => async (dispatch) => {
  const res = await axios.get(
    `https://api.themoviedb.org/3/movie/popular?api_key=KEY&language=en-US&page=1`
  );
  dispatch({
    type: GET_TRENDING,
    payload: res.data,
  });
};

My reducer:

import { GET_TRENDING } from "../types";

const initialState = {
  trending: [],
  loading: true,
};

export default function trendingReducer(state = initialState, action) {
  switch (action.type) {
    case GET_TRENDING:
      return {
        ...state,
        trending: action.payload,
        loading: false,
      };
    default:
      return state;
  }
}

Ignore the Card constant etc, that's related to an UI components library. You can see from the code that I'm logging the results of 'trending'. But I'm getting an empty array but here's the strange part:

If I change my map function from mapping through "trending.results" to "trending" and I refresh then the console returns an empty array and another array which is the correct one. If I change it back to "trending.results" then React auto-reloads the page returns me the correct array two times and it displays the data on the app but if I refresh the page without changing anything on the code then it goes back to showing an empty array and an error that says "cannot read property map of undefined" obviously cause somehow I'm not getting the correct data.

Anyone ever had this before? It makes absolutely no sense at all or if so then can someone guide me on how to solve this? I tried shutting down the React server completely and restarting it that wouldn't solve it. My brain is frozen (I can record a clip if required)

"trending.results" is working because you have an another array inside the "results" in your API. and yes, please, can you add an image of what data is coming in console or an app. — bharti parmar
– bharti parmar, Commented Oct 30, 2020 at 12:54

Fahad Shinwari · Accepted Answer · 2020-10-30 15:04:43Z

1

The answer is pretty simple. All you have to do is first getting the array from the api and then mapping through it. trending.results is not set so the error is shown. Cannot read property map of undefined

Go with a ternary operator:

    {trending.results && trending.results.map((i) => (
          <React.Fragment key={i.id}>
            <h6>{i.title}</h6>
          </React.Fragment>
        ))}

edited Oct 30, 2020 at 15:04

answered Oct 30, 2020 at 14:34

Fahad Shinwari

9668 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

deepak · Accepted Answer · 2020-10-31 11:44:02Z

0

try this way.

export const getTrending = () => async (dispatch) => {
  const res = await axios.get(
    `https://api.themoviedb.org/3/movie/popular?api_key=KEY&language=en-US&page=1`
  );
  dispatch({
    type: GET_TRENDING,
    payload: res.data.results,
  });
};




const Card = (props) => (
      <Panel {...props} bordered header='Card title'>
        {trending && trending.map((i) => (
          <React.Fragment key={i.id}>
            <h6>{i.title}</h6>
          </React.Fragment>
        ))}
      </Panel>
    );

edited Oct 31, 2020 at 11:44

answered Oct 30, 2020 at 12:54

deepak

1,3851 gold badge8 silver badges12 bronze badges

Collectives™ on Stack Overflow

Strange issue when making requests/displaying data on React (Axios, React, Redux)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related