Question

我目前正尝试在我的render方法中使用从api接收的一些数据。我正在我的componentDidMount中调用该函数。函数如下：

 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",
},
]

我无法弄清楚状态为何在render方法中返回Object Object。我也收到错误： 警告：无法在现有状态转换期间（例如在render内进行更新）。渲染方法应该是道具和状态的纯函数 我不确定这是否与我的问题有关。感谢您的帮助。

Answer 1

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

当您将字符串“ hello”与对象“ this.state.Pods”连接在一起时，上一行会将对象转换为字符串。您应该使用或两个控制台语句来分别记录hello和this.state.Pods。

组件状态从功能切换到渲染组件

1 个答案: