我正在创建一个从 api (pokeapi.co) 获取数据的 React/Redux 应用程序。我使用 axios
获取数据。当我在 React 组件上显示数据时,会导致数据为 undefined
的错误。经过一番挖掘,我发现我的状态首先返回初始状态,即空对象,然后返回 api 数据。但它不会显示 react 。我是 React 的新手,所以我猜它与 axios 异步功能有关。如何使用 api 的初始数据设置状态或等待呈现数据直到状态具有 api 的数据?
这是 reducer
function pokemonReducer(state={}, action) {
switch (action.type) {
case pokemonsActions.GET_POKEMON_SUCCESS:
{
return {...state, data: action.payload.data}
}
default:
{
return state;
}
}
}
export default pokemonReducer
这是 Action
export const GET_POKEMON_SUCCESS = 'GET_POKEMON_SUCCESS'
export const GET_POKEMON_ERROR = 'GET_POKEMON_ERROR'
function getPokemonSuccess(response) {
return {
type: GET_POKEMON_SUCCESS,
payload: response
}
}
function getPokemonError(err) {
return {
type: GET_POKEMON_ERROR,
payload: err
}
}
export function getPokemon() {
return (disp,getState) =>
{
return pokeAPI.getPokeAPI()
.then((response) => { disp(getPokemonSuccess(response))})
.catch((err)=> disp(getPokemonError(err)))
}
}
商店
const loggerMiddleware = createLogger()
const middleWare= applyMiddleware(thunkMiddleware,loggerMiddleware);
const store = createStore(rootReducer,preloadedState,
compose(middleWare, typeof window === 'object' && typeof window.devToolsExtension !== 'undefined'
? window.devToolsExtension() : (f) => f
))
const preloadedState=store.dispatch(pokemonActions.getPokemon())
export default store
在 React 组件中
function mapStateToProps(state) {
return {
pokemons:state.pokemons
}
}
class PokemonAbility extends React.Component {
render(){
return (
<div>
<div className="header">
<h1>Fetch Poke Api with axios</h1>
</div>
<main>
<h3> Display pokemons abilities </h3>
<p>{this.props.pokemons.data.count}</p>
</main>
</div>
)
}
}
export default connect(
mapStateToProps
)(PokemonAbility)
API 数据示例
{
"count": 292,
"previous": null,
"results": [
{
"url": "https://pokeapi.co/api/v2/ability/1/",
"name": "stench"
},
{
"url": "https://pokeapi.co/api/v2/ability/2/",
"name": "drizzle"
},
{
"url": "https://pokeapi.co/api/v2/ability/3/",
"name": "speed-boost"
}
],
"next": "https://pokeapi.co/api/v2/ability/?limit=20&offset=20"
}
最佳答案
您在数据加载之前渲染您的组件。有很多策略可以解决这个问题。排名不分先后,以下是一些示例:
1。将渲染器短路
如果数据不存在,您可以通过返回加载消息来短路渲染:
function mapStateToProps(state) {
return {
pokemons:state.pokemons
}
}
class PokemonAbility extends React.Component {
render(){
if (!this.props.pokemons.data) {
return (
<div>Loading...</div>
);
}
return (
<div>
<div className="header">
<h1>Fetch Poke Api with axios</h1>
</div>
<main>
<h3> Display pokemons abilities </h3>
<p>{this.props.pokemons.data.count}</p>
</main>
</div>
);
}
}
export default connect(mapStateToProps)(PokemonAbility);
2。将数据检查提升到父组件
你可以将mapStateToProps
移动到更高的组件中,或者抽象出 View 组件,只在数据准备好时渲染 View :
function mapStateToProps(state) {
return {
pokemons:state.pokemons
}
}
class SomeHigherComponent extends React.Component {
render(){
return (
this.props.pokemons.data ?
<PokemonAbility pokemons={this.props.pokemons} /> :
<div>Loading...</div>
);
}
}
3。高阶分量数据校验
您可以将您的组件包装在“高阶组件”(一个接受组件类并返回组件类的函数)中,以在渲染之前检查该 prop 是否存在:
function EnsurePokemon(ChildComponent) {
return class PokemonEnsureWrapper extends React.Component {
render() {
return (
this.props.pokemons.data ?
<ChildComponent {...this.props} /> :
<div>Loading...</div>
);
}
}
}
用法:
export default connect(
mapStateToProps
)(EnsurePokemon(PokemonAbility))
并且您可以将任何子组件包装在这个 EnsurePokemon
HOC 中,以确保它在数据加载之前不会呈现。
关于reactjs - 如何使用 api 的数据初始化状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48054117/