使用 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 （此生命周期方法已被弃用。它可以像这样替换）或简单地使用刷新按钮来调度操作以更新产量。