当我通过fetch API请求记录我的React状态setState时，为什么我会得到两个响应

Question

我在React中的状态的console.log((中得到两个响应。第一个是空的，第二个包含我要打印的数据。

[]空数组

[｛…｝]0:｛id:1，日期："2011-07-01T10:30:3000Z"，名称："John"｝长度：1proto：阵列(0(

我的代码如下：

constructor(props){
super(props);
this.state = {
session: []
}
}
componentDidMount(){
this.fetchSessionData();
}
fetchSessionData = () => {
fetch(`http://localhost:3000/sessions/${this.props.match.params.id}`)
.then(response => response.json())
.then(session => this.setState({session:session});
}
render() 
{
console.log(this.state.session);
return(
<div>
<p>Hello world + {this.props.match.params.id}</p>
</div>
)
}   

如果我的响应中有不止一个javascript对象，我还会看到这样的内容：

[]空数组

〔｛…｝〕0:｛id:1，日期："2018-11-01T10:30:3000Z"，名称："John"｝length:1proto：阵列(0(

〔｛…｝〕0:｛id:1，日期："2018-11-01T10:30:3000Z"，名称："John"｝，｛id:1，日期："2018-07-22T12:37:01.000Z"，名称："Steve"}，长度：2，proto：阵列(0(

依此类推。我怀疑这与承诺或生命周期有关，但未能找到答案。此外，当我尝试访问像this.state.session.id这样的状态值时，它会返回undefined。这是怎么回事？

Answer 1

控制台日志位于render((函数中，因此它在每次组件渲染(或重新渲染(时都会触发。这很正常。它在第一次加载时进行渲染，然后在完成获取数据和更新状态时重新渲染。

此外，this.state.session是一个包含json对象的数组。所以你必须写一些类似this.state.session[0].id的东西

Answer 2

每次执行render方法时，您都会看到consoled语句。

第一个控制台：安装组件时。

第二个控制台：组件更新/重新渲染时。

组件何时更新-当组件接收到任何新的输入(道具(时-组件更新其自身上下文的状态时-组件不更新状态，但调用forceUpdate

如果我多次执行setState，会打印n次吗-没有setState是异步操作，React批量执行。