組件 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。