我想从reducer返回的状态中获取一个api。 这是我的容器:PokeDetailApi.js

import React, {Component} from "react"; 
import {connect} from "react-redux"; 
import axios from "axios"; 
 
class PokeDetailApi extends Component{ 
    constructor(){ 
        super(); 
        this.state = { 
            pokedetails:"" 
        } 
    } 
 
    componentDidMount(){ 
        axios.get({this.props.pokemon.url}).then( (obj) => { 
            this.setState({ 
                pokedetails: obj.data.results 
            }); 
        }); 
    } 
 
    render(){ 
        if(!this.props.pokemon){ 
            return ( 
                <div> 
                    <h1>Please select a pokemon.</h1> 
                </div> 
            ) 
        } 
 
        // const url = this.props.pokemon.url; 
        const urlapi = this.state.pokedetails; 
 
        console.log(url); 
        console.log(urlapi); 
 
        return( 
            <div> 
                <p>{this.props.pokemon.name}</p> 
            </div> 
        ) 
    } 
} 
 
function mapStateToProps(state){ 
    return { 
        pokemon: state.selected_pokemon 
    } 
} 
 
export default connect(mapStateToProps)(PokeDetailApi); 

{this.props.pokemon.url} 返回特定 pokemon 的 url。我想使用此处找到的网址显示该神奇宝贝的所有详细信息:https://pokeapi.co/

这是reducer返回的对象:

{ 
    name:"bulbasaur" 
    url:"http://pokeapi.co/api/v2/pokemon/1/" 
} 

使用axios从reducer的api访问对象的正确方法是什么？

请您参考如下方法:

您正在谈论 reducer ，但直接在组件中调用 fetch..您应该调用执行提取操作。

除此之外，您可以在 .then 中使用第一次提取的结果(pokedetails)执行另一次提取，而不是在渲染中:

axios.get(this.props.pokemon.url) 
  .then(res => res.data.results) 
  .then(axios.get) // fetch on pokedetails 
  .then(console.log) // console.log result, here you could setState results