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

Question

我想从 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} returns 一个 url 一个特定的口袋妖怪。我想使用此处找到的 url 显示该宠物小精灵的所有详细信息：https://pokeapi.co/

这是从 reducer 返回的对象：

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

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

Answer 1

你说的是 reducer，但是直接在你的组件中调用 fetch..你应该调用一个执行 fetching 的动作。

除此之外，您可以在您的 .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

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

How to fetch using axios when the api comes from a state via reducer?

javascript

reactjs

redux

axios