为什么解构和连接会在数组中留下不同类型的undefined？

Question

这是我的代码

console.log(this.state.pins);
this.setState({ pins: [...this.state.pins, ...block] });
console.log(this.state.pins);

以下是我们在控制台中看到的内容......

更多的经验......当我将代码设置为此时。

this.setState({pins: this.state.pins.concat(block)});

所以我在这里使用map函数。

{pins.map(pin => <PinnedBlock blockId={pin} /> )}

当我在这个数组上使用上面的map函数时：

this.setState({ pins: [...this.state.pins, ...block] }); 

我得到<PinnedBlock blockId={pin} /> pin未定义。

当我在这个数组上使用上面的map函数时：

this.setState({pins: this.state.pins.concat(block)});

我没有得到与undefined相对应的输出。

有人可以帮我解释一下这里发生了什么吗？