[英]Call API with React Redux, Axios
对不起,我的英语不好和逻辑不好,我想使用 pokeapi.co 作为我的 Pokedex。
我的问题:我需要显示从 api 中获取信息的道具。 我可以在我的 axios 请求的 console.log(response) 中接收信息,但我无法在我的 Nav 组件的列表中显示它们,我的错误在哪里?
终点: https ://pokeapi.co/api/v2/pokemon
我的代码:
应用程序.js
// == Import : npm
import React from 'react';
// == Import : local
import Home from 'src/components/Home';
import Nav from 'src/containers/Nav';
import './app.scss';
// == Composant
const App = results => (
<div id="app">
<nav className="nav">
<Nav props={results} />
</nav>
<main className="content">
<Home />
</main>
)}
</div>
);
// == Export
export default App;
减速器.js
// == Initial State
const initialState = {
results: [],
name: '',
url: '',
};
// == Types
export const FETCH_POKEMON_API = 'FETCH_POKEMON_API';
const RECEIVE_POKEMON_LIST = 'RECEIVE_POKEMON_LIST';
// == Reducer
const reducer = (state = initialState, action = {}) => {
// console.log('une action arrive dans le reducer', action);
switch (action.type) {
case RECEIVE_POKEMON_LIST:
return {
...state,
results: action.results,
};
default:
return state;
}
};
// == Action Creators
export const fetchPokemonApi = () => ({
type: FETCH_POKEMON_API,
});
export const receivePokemonList = results => ({
type: RECEIVE_POKEMON_LIST,
results,
});
// == Selectors
// == Export
export default reducer;
导航组件
import React from 'react';
import PropTypes from 'prop-types';
// import { NavLink } from 'react-router-dom';
// import { getUrl } from 'src/utils';
import './nav.scss';
const Nav = ({ results }) => {
console.log('if i receive my props from PokeAPI its win guys', results);
return (
<div className="menu">
{results.map(({ Pokemon }) => (
<li key={Pokemon} className="menu-item">
{Pokemon}
</li>
))}
</div>
);
};
Nav.propTypes = {
results: PropTypes.arrayOf(
PropTypes.shape({
name: PropTypes.string.isRequired,
}),
).isRequired,
};
export default Nav;
导航容器
// == 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;
axios 中间件
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;
怎么了 ?
谢谢 !
感谢@Meshack Mbuvi的私下支持。
thunk 的缺失是第一个问题
以下代码解决了我的问题(感谢@Mbuvi):
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);
});
};
使用 Lodash
{
_.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>
)})
}
我想你忘了返回地图组件。
我认为代码失败了,因为最初结果是未定义的(在调用 API 之前)。 此外,您的 Nav 组件要求您的result
对象应该有一个名为name
的属性。 使您的初始状态如下:
const initialState = {
results: [{name:""}],
name: '',
url: '',
};
让我知道进展如何
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.