组件 state 从 function 切换到渲染组件

Question

我目前正在尝试在我的渲染方法中使用从 api 收到的一些数据。 我在 componentDidMount 中调用 function。 这是 function：

 getDataFromDb = () => {
        axios.get(this.props.urlFromParent + "GetCurrentPods/Device1")
            .then( (res) => {
                this.setState({
                    Pods : res.data
                })
                console.log(this.state.Pods)
            })
 };

我在我的渲染方法中这样调用它

{console.log('hello'+ this.state.Pods)}

这是 console.log 输出：

hello[object Object]
Array [
Object {
    "ParentDeviceID": "Device1",
    "ParentDeviceIsActive": true,
    "PodIsActive": true,
    "PodLocation": 5,
    "PodType": 2,
    "__v": 0,
    "_id": "5d6bfe9c50a6c33006cbd6ac",
},
]

我无法弄清楚为什么 state 在渲染方法中返回 object Object。 我也收到错误：警告：在现有的 state 过渡期间无法更新（例如在render中）。 渲染方法应该是纯 function 的道具和 state我不确定这是否与我的问题有关。 谢谢你的帮助。

Answer 1

console.log('hello'+ this.state.Pods)

当您将字符串“hello”与 object “this.state.Pods”连接时，上述行会将 object 转换为字符串。 您应该使用，或两个控制台语句以不同方式记录 hello 和 this.state.Pods。