javascript - 在状态中设置 JSON 数组，不显示正确的 javascript 对象

Question

我正在 React 中试验 fetch API，从我自己创建的服务器获取一些虚拟数据。

在我的 componentDidMount 生命周期 Hook 中，我遇到了对服务器的提取调用。

componentDidMount(){
  axios.get('http://localhost:8080/api/data/50/1')
  .then(res =>{
    console.log(res.data)
    this.setState({
      names: res.data
    }, ()=>{
      console.log(this.state.names)
    })

  })
console.log(this.state.names)
}

所以在这里，每当我将回调传递到 setState 时，我都会正确记录一个 json 对象数组，这是所期望的。

但是在我的渲染方法中:

render() {
console.log("state is" + this.state.names)

它在第一次渲染时不记录任何内容(我猜这是因为 setState 异步工作，但第二次它只是记录

state is[object Object],[object Object],[object Object],`[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]`

为什么当我在渲染方法中记录状态时没有显示正确的数组，但当我将回调传递到 setState 方法时它会正确显示

Answer 1

我认为应该是:

console.log("State is: ", this.state.names)

而不是

console.log("State is: " + this.state.names)