使用 axois 渲染 redux 動作時未捕獲的 Promise

Question

嗨，我在嘗試呈現 json 響應時使用 redux 來執行一些 API 調用。 我正在嘗試記錄響應以找出正在發生的事情，但即使這樣也不起作用？

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

這里的錯誤是你在返回的 JSX 標簽中調用了loadyield()函數

您可以在組件安裝后加載數據。 您可以通過添加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 （此生命周期方法已被棄用。它可以像這樣替換）或簡單地使用刷新按鈕來調度操作以更新產量。