React Hooks useState Array пустой с состояниями, отображаемыми в компоненте - PullRequest
Новая
       6

React Hooks useState Array пустой с состояниями, отображаемыми в компоненте

0 голосов
/ 05 мая 2020

У меня есть ситуация, когда я могу успешно отправлять свои состояния с помощью редукторов, и я могу отобразить его в своем компоненте

Здесь соответствующий код

в моем 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.com/demo/v2/leagues/")
        .then(res => {
          let leagues = res.data.api.leagues;
          dispatch(receivedLeaguesList(leagues));
        })
        .catch(e => {
          console.log(e);
        });
    }
}

мой 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;
  }
};

в моем компоненте component/Leagues.js

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


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

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

const mapDispatchToProps = {
  getList: fetchLeaguesList
};

Я воспроизвел демонстрацию здесь => https://codesandbox.io/s/select-demo-71u7h?

Я могу визуализировать свои leaguesList состояния в моем компоненте, выполняющем карту, но почему, когда 

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

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

возвращает пустой массив?

См. Изображение enter image description here

1 Ответ

2 голосов
/ 05 мая 2020

Вы неправильно устанавливаете значение инициализации useState: 

 const [itemsLeagues] = useState(leaguesList);

вместо 

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

Возвращаемое значение useState не само значение, а массив значений и mutator: 

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

Итак, если вы пытались деструктурировать массив упаковки, который вы передали в useState (), вы должны использовать его следующим образом (хотя он вам не нужен): 

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