Uncaught Promise при рендеринге с аксуа

Question

Привет! Я использую приставку для выполнения некоторых вызовов API при попытке отобразить ответ json. Я пытаюсь записать ответы, чтобы понять, что происходит, но даже это не работает?

dashaction. js

export function updateyield(total){
    return{
        type:"UPDATE_YIELD",
        total: total
    }
}

export function loadyield(){
    return(dispatch)=>{
        return axios.get("localhost:5000/getallyield").then ((response) => {
            dispatch(updateyield(response.data));
            let res = response.data;
            console.log(res.data)
        })
    }
}

это отображается в DashContent

class DashContent extends Component {

    render () {
        return(

        <div>
        {this.props.loadyield()}
        <h3> Yield</h3>
        <ul>{this.props.total}</ul>
        </div>
        );
    }

}
function mapStatetoProps(state) {
    return state
    };

export default connect(mapStatetoProps, {loadyield}) (DashContent);

Вот полное сообщение об ошибке:

Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.
    in div (at dashboardcontainer.js:12)
    in DashContent (created by ConnectFunction)
    in ConnectFunction (at Dashboard.js:15)
    in div (at Dashboard.js:14)
    in Dashboard (created by Context.Consumer)
    in Route (at App.js:16)
    in Switch (at App.js:15)
    in div (at App.js:13)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:12)
    in App (at src/index.js:13)
    in Provider (at src/index.js:13)

Это ошибка с моим запросом? или как я даю ответ? из моего журнала API, кажется, ничего не было получено? извинения, если я не предоставил достаточно информации

Answer 1

Ошибка здесь в том, что вы вызываете функцию loadyield() в возвращенном теге JSX

Вы можете загрузить данные после монтирования компонента. Вы можете сделать это, добавив componentDidMount() метод жизненного цикла. Таким образом, ваш DashContent будет выглядеть примерно так.

class DashContent extends Component {
    componentDidMount(){
        this.props.loadyield();
    }
    render () {
        return(
        <div>
            <h3> Yield</h3>
            <ul>{this.props.total}</ul>
        </div>
        );
    }

}

function mapStatetoProps(state) {
    return state
};

export default connect(mapStatetoProps, {loadyield}) (DashContent);

В качестве альтернативы вы можете использовать componentWillRecieveProps (этот метод жизненного цикла устарел. Его можно заменить следующим образом: this ) или просто используйте кнопку refre sh, которая отправляет действие для обновления урожая.