I have a situation where i can successfully dispatch my states with reducers and i can render it in my ponent

Here the relevant code

in my action/index.js

export const receivedLeaguesList = json => ({
  type: RECEIVE_LEAGUES_LIST,
  json: json
});

export function fetchLeaguesList() {
  return function(dispatch) {
    dispatch(requestLeaguesList());
      return axios
        .get("/")
        .then(res => {
          let leagues = res.data.api.leagues;
          dispatch(receivedLeaguesList(leagues));
        })
        .catch(e => {
          console.log(e);
        });
    }
}

my reducers/index.js

import { REQUEST_LEAGUES_LIST, RECEIVE_LEAGUES_LIST } from "../actions";

const initialState = {
  leaguesList: [],
  isLeagueListLoading: false
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case REQUEST_LEAGUES_LIST:
      return { ...state, isLeagueListLoading: true };
    case RECEIVE_LEAGUES_LIST:
      return { ...state, leaguesList: action.json, isLeagueListLoading: false };
    default:
      return state;
  }
};

in my ponent ponent/Leagues.js

let Leagues = ({ leaguesList, loading, getList }) => {
  useEffect(() => {
    getList();
  }, [getList]);


  const [itemsLeagues] = useState([leaguesList]);

  console.log("league list", itemsLeagues);

const mapDispatchToProps = {
  getList: fetchLeaguesList
};

I have reproduced the demo here => ?

I can render my leaguesList states in my ponent doing the map, but why when

  const [itemsLeagues] = useState([leaguesList]);

  console.log("league list", itemsLeagues); 

returns an empty array ?

See the image

I have a situation where i can successfully dispatch my states with reducers and i can render it in my ponent

Here the relevant code

in my action/index.js

export const receivedLeaguesList = json => ({
  type: RECEIVE_LEAGUES_LIST,
  json: json
});

export function fetchLeaguesList() {
  return function(dispatch) {
    dispatch(requestLeaguesList());
      return axios
        .get("https://www.api-football./demo/v2/leagues/")
        .then(res => {
          let leagues = res.data.api.leagues;
          dispatch(receivedLeaguesList(leagues));
        })
        .catch(e => {
          console.log(e);
        });
    }
}

my reducers/index.js

import { REQUEST_LEAGUES_LIST, RECEIVE_LEAGUES_LIST } from "../actions";

const initialState = {
  leaguesList: [],
  isLeagueListLoading: false
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case REQUEST_LEAGUES_LIST:
      return { ...state, isLeagueListLoading: true };
    case RECEIVE_LEAGUES_LIST:
      return { ...state, leaguesList: action.json, isLeagueListLoading: false };
    default:
      return state;
  }
};

in my ponent ponent/Leagues.js

let Leagues = ({ leaguesList, loading, getList }) => {
  useEffect(() => {
    getList();
  }, [getList]);


  const [itemsLeagues] = useState([leaguesList]);

  console.log("league list", itemsLeagues);

const mapDispatchToProps = {
  getList: fetchLeaguesList
};

I have reproduced the demo here => https://codesandbox.io/s/select-demo-71u7h?

I can render my leaguesList states in my ponent doing the map, but why when

  const [itemsLeagues] = useState([leaguesList]);

  console.log("league list", itemsLeagues); 

returns an empty array ?

See the image

• javascript
• reactjs
• react-hooks
• use-state

• Why would you store props in state? – Adam Jeliński Commented May 5, 2020 at 13:18
• Could it be the CORS issue? Are you getting response from the API in the first place? – Alex Khristo Commented May 5, 2020 at 13:19
• What's the issue with that? i use CORS Unblock google extension to allow – Koala7 Commented May 5, 2020 at 13:20
• It seems @Kotofenum is right, I just looked at the network tab and it shows requests to api-football./demo/v2/leagues fail – vitkarpov Commented May 5, 2020 at 13:21
• In your codesandbox demo I'm getting an exception caused by the request being blocked by CORS policy. Do you have the same issue in your local environment? – Alex Khristo Commented May 5, 2020 at 13:22

1 Answer 1

You're setting useState's init value wrong:

 const [itemsLeagues] = useState(leaguesList);

instead of

 const [itemsLeagues] = useState([leaguesList]);

The return value of useState isn't the value itself, but the array of value and mutator:

const [value, setValue] = useState([42, 43])
// here's value equals [42, 43]

So if you were trying to destructure the wrapping array you passed to useState(), you should use it like this (though you don't need it):

const [[itemsLeagues]] = useState([leaguesList]);