点击updateState按钮后state更新异常：控制台打印全数组，页面显示正确

控制台打印完整数组的原因 #

• React的state如果是数组、对象这类引用类型，控制台会展示它的实时引用值，而非你调用console.log那一刻的快照。比如你要是直接修改了原数组（比如用splice这种会改变原数组的方法），再调用setState，控制台里的state会跟着原数组的变化实时更新，看起来像是打印了完整数组，但其实是后续引用变化导致的。
• 另外，setState是异步更新的，如果你在调用setState之后立刻打印state，此时state还没完成更新，打印的是旧值，但因为数组是引用类型，后续原数组被修改的话，控制台里的旧数组引用也会显示最新内容，造成“打印完整数组”的错觉。

页面显示正常的原因 #

React在调用setState后，会触发组件的重新渲染流程，渲染时会读取更新后的state值（也就是你预期的切片数组['usa','china']），所以页面能正确展示最新状态。

内容的提问来源于stack exchange，提问作者Shivang Shukla