Reactjs 使用React Redux、Axios调用API

对不起，我的英语不好，逻辑也不好，我想用pokeapi.co做我的Pokedex

我的问题是：我需要显示包含api信息的道具。我可以在控制台中接收信息。记录（响应）我的axios请求，但我无法在导航组件的列表中显示这些信息，我的错误在哪里

端点：

我的代码：

App.js

导航组件

axiosMiddleware

怎么了

谢谢你

使用Lodash

  {
      _.map(results, (Pokemon, index) => {
          return (
            <li key={Pokemon} className="menu-item">
                 {Pokemon}
            </li>
          )})
  }

{
_.map（结果，（口袋妖怪，索引）=>{
返回(

{口袋妖怪}

)})
}

使用本地地图

 {
   results.map((Pokemon, index) => {
   return (
         <li key={Pokemon} className="menu-item">
            {Pokemon}
         </li>
     )})
  }

{
results.map（（口袋妖怪，索引）=>{
返回(

{口袋妖怪}

)})
}

---

我认为您忘记返回map组件了。

我认为代码失败了，因为最初，结果是未定义的（在调用API之前）。此外，Nav组件要求

结果

对象应具有名为

名称

的属性。 您的初始状态如下所示：

const initialState = {
   results: [{name:""}],
   name: '',
   url: '',
};

---

请告诉我进展如何

多亏了@Meshack Mbuvi的私下支持

• thunk的消失是第一个问题

• 以下代码解决了我的问题（感谢@Mbuvi）：

---

我应用了你的本地地图技术，但仍然不起作用地图组件是我的导航组件，对吗？我想从data.response.results收到结果我在州和道具之间迷失了方向。。

// == Import : npm
import { connect } from 'react-redux';

// == Import : local
import Nav from 'src/components/Nav';

// === State (données) ===
const mapStateToProps = state => ({
  results: state.results,
});

// === Actions ===
const mapDispatchToProps = {};

// Container
const NavContainer = connect(
  mapStateToProps,
  mapDispatchToProps,
)(Nav);

// == Export
export default NavContainer;

import axios from 'axios';

import { FETCH_POKEMON_API, receivePokemonList } from 'src/store/reducer';

const ajaxMiddleware = store => next => (action) => {
  console.log('L\'action suivante tente de passer', action);
  switch (action.type) {
    case FETCH_POKEMON_API:
      axios.get('https://pokeapi.co/api/v2/pokemon')
        .then((response) => {
          console.log('response', response);
          console.log('response.data', response.data);
          console.log('response.data.results', response.data.results);

          const { data: results } = response;
     this.setState({
            results: response.data.results,
          });
          store.dispatch(receivePokemonList(results));
        })
        .catch(() => {
          console.log('Une erreur s\'est produite');
        });
      break;

    default:
      // console.log('action pass', action);
      next(action);
  }
};

export default ajaxMiddleware;

  {
      _.map(results, (Pokemon, index) => {
          return (
            <li key={Pokemon} className="menu-item">
                 {Pokemon}
            </li>
          )})
  }

 {
   results.map((Pokemon, index) => {
   return (
         <li key={Pokemon} className="menu-item">
            {Pokemon}
         </li>
     )})
  }

const initialState = {
   results: [{name:""}],
   name: '',
   url: '',
};

      axios.get('https://pokeapi.co/api/v2/pokemon')
        .then((response) => {
          console.log('response.data.results', response.data.results);
          // ici je défni pokemons from api, qui contient la list des pokemons
            // It was like this: const {results} = response.data.results
          const { results } = response.data; // The error was here
          dispatch(receivePokemonList(results));
        })
        .catch((err) => {
          console.log('Une erreur s\'est produite', err);
        });
    };