首先，在您的情况下，这两种语法完全不同，您可能正在寻找的是

this.setState({pictures: this.state.picture.concat(pics)})

和

this.setState(prevState => ({
   pictures: prevState.pictures.concat(pics)
}))

要理解为什么第二种方法是首选方法，您需要了解 React 在setState()内部做了什么。

React 将首先将您传递给的对象合并setState()到当前状态。然后它会开始和解的事情。因为调用setState()可能不会立即更新您的状态。

setState()为了更好的性能，React 可以将多个调用批处理为单个更新。

考虑一个简单的情况，要理解这一点，在您的函数中您可能会setState()多次调用，例如：

myFunction = () => {

   ...
   this.setState({pictures: this.state.picture.concat(pics1)})
   this.setState({pictures: this.state.picture.concat(pics1)})
   this.setState({pictures: this.state.picture.concat(pics1)})

   ...
}

这在一个简单的应用程序中不是一个有效的用例，但随着应用程序变得复杂，多个setState()调用可能会从多个地方发生，做同样的事情。

所以现在为了执行有效的更新，React 通过提取传递给每个setState()调用的所有对象来进行批处理，将它们合并在一起形成一个对象，然后使用这个对象来做setState()。根据setState()文档：

这种形式setState()也是异步的，同一个周期内的多个调用可能会被批处理在一起。例如，如果您尝试在同一周期内多次增加项目数量，则将导致等效于：

Object.assign(
  previousState,
  {quantity: state.quantity + 1},
  {quantity: state.quantity + 1},
  ...
)

后续调用将覆盖同一周期中先前调用的值，因此数量只会增加一次。如果下一个状态取决于当前状态，我们建议使用 updater 函数形式，而不是：

this.setState((state) => {
  return {quantity: state.quantity + 1};
});

有关更多详细信息，请参阅：

• 状态和生命周期指南
• 深入：何时以及为何对setState()调用进行批处理？
• 深入：为什么不this.state立即更新？

— setState()- 其他 API - React.Component - React .

因此，如果任何对象包含相同的键，则存储具有相同键的最后一个对象的键的值。因此，更新仅使用最后一个值发生一次。

演示代码沙盒

TL;DR： FunctionalsetState主要有助于setState在短时间内触发多个s时期望正确的状态更新，而传统的setState协调并可能导致意外状态。

请查看这篇关于Functional setState 的精彩文章以获得清晰的理解

这是工作演示

首先，您正在尝试在每个案例中做不同的事情，您在一个中分配图片并在另一个中连接图片。

假设 this.state.pictures 包含[1, 2, 3]和 pics 包含[4, 5, 6]

this.setState({pictures: pics})

在上述情况下 this.state.pictures 将包含图片即 this.state.pictures = [4, 5, 6]

this.setState(prevState => ({
   pictures: prevState.pictures.concat(pics)
}))

而在上面的片段中， this.state.pictures 将包含以前的图片 + 图片 ie this.state.pictures = [1, 2, 3, 4, 5, 6]

无论哪种方式，您都可以调整它以满足您的 API 需求，如果它就像一个分页响应，那么您最好连接每个请求的结果，否则如果每次都获得整个数组，只需分配整个数组。

常规 setState VS 函数式 setState

现在，您的问题主要可能是setState与对象一起使用还是与函数一起使用。

人们出于不同的原因使用它们，现在setState据说该功能是安全的，因为React有一种称为协调过程的东西，其中在setState频繁或并发触发时合并内部的多个对象，并一次性应用更改，有点像批处理过程. 这可能会导致在如下场景中出现一些意想不到的结果。

例子：

increaseScoreBy3 () {
 this.setState({score : this.state.score + 1});
 this.setState({score : this.state.score + 1});
 this.setState({score : this.state.score + 1});
}

正如您所期望的那样，分数会增加 3，但 React 所做的是合并所有对象并仅更新一次分数，即增加 1

这是函数回调发光的情况之一，因为协调不会发生在函数上并且执行以下代码将按预期执行操作，即更新分数为 3

increaseScoreBy3 () {
 this.setState(prevState => ({ score: prevState.score + 1 }));
 this.setState(prevState => ({ score: prevState.score + 1 }));
 this.setState(prevState => ({ score: prevState.score + 1 }));
}

快速回答：

始终使用 setState() 的函数形式。

this.setState((state, props)=>({
    someValue: state.somevalue + 1
}));

这种方法不易出错，有助于消除一些非常难以发现的错误。即使 react 批量处理多个这样的更新，每次更新都是单独的函数调用，后续更新不会导致其中一些更新丢失。

另一种方法

this.setState({
someValue: state.somevalue + 1
});

如果频繁重复，可能会导致某些更新丢失，因为 React 会批量处理如此频繁的更新。