当api通过reducer来自状态时如何使用axios获取？

Question

我想从减速器返回的状态中获取一个 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。我想使用此处找到的该 url 显示该 pokemon 的所有详细信息：https://pokeapi.co/

这是reducer返回的对象：

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

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

Answer 1

您说的是减速器，但直接在您的组件中调用 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