Javascript 使用concat与直接赋值时，setState是否有任何区别？

我使用concat在setState中分配数据

在那之前我用过

  componentDidMount() {
    let jwtToken = { accessToken: "" };
    axios.post(" ", jwtToken).then(data => {
      console.log(data);
      this.setState({
        courseData: this.state.courseData.concat(
          data.data.courseDetails.userModuleDetailsV2
        )
      });
    });
  }

我教的两个都是一样的，但在使用

courseData:data.data.courseDetails.userModuleDetailsV2时
我的页面没有播放视频有什么区别吗？但为什么媒体要在下面的场景中播放

我尝试了

console.log

内容，在这两种情况下内容是相同的（显示mp4文件）

首先，我从axios获取对象类型，因此我对所需数据进行切片并存储在

setState

中

[].concat(newValues)
// or just
newValues // if array
[newValues] // if something else

。相反，React通过传递一个函数来提供

previousState

，该函数接受前一个状态作为第一个参数，例如

//一般的
this.setState（（oldState）=>（{…oldState}））；
//用于更新对象
this.setState（（{myObject}）=>（{
myObject:{…myObject，ProptUpdate:true}
})
);

concat（）

方法用于合并两个或多个数组。这种方法 不更改现有数组，而是返回一个新数组

它确认在状态的不可变更新中使用是安全的

请注意，对于作为参数传递的任何值，它的工作方式都是相同的，但会使数组变得平坦

concat

方法创建一个新数组，其中包含 为每个对象调用它的对象，按顺序后跟 参数，该参数的元素（如果该参数是数组） 或者参数本身（如果参数不是数组）。事实并非如此 递归到嵌套数组参数中

---

.concat

使用旧的

this.state.courseData

值和接收到的新值创建一个新数组。由于初始状态是一个空数组

[]

，除非

data.data.courseDetails.userModuleDetailsV2

不是数组，否则两者的结果都是相同的

[1].concat(['test'])   //=> [1, "test"]
[1].concat('test')     //=> [1, "test"]
[1].concat([['test']]) //=> [1, ["test"]]

相当于

this.state.courseData.concat(data.data.courseDetails.userModuleDetailsV2)

因此两者都是相同的，但是这里不需要

.concat

，因为它在

componentDidMount

中只被调用一次，除非

this.state.courseData

预先填充了来自props或其他地方的默认数据

---

删除

.concat

时它不起作用？ 这意味着

data.data.courseDetails.userModuleDetailsV2

可能不是数组，您希望在render方法中使用数组，但当axios调用成功时（以及在

setState

之后），不再是数组

---

也就是说，如果您添加了“获取更多”功能，那么使用

.concat

可能会很有用

您可以只更新状态中所需的值，而不扩展旧状态（

{…state，courseData://***}

），因为（）：

更新程序的输出与状态进行了浅层合并

---

设置状态没有什么神奇之处：您给它一个带有键/值对的对象，它用它们更新您的状态。无论您如何构建该对象，唯一重要的是在将对象传递给setState函数时该对象是什么。

.concat

使用旧的

this.state.courseData

值和接收到的新值创建一个新数组。由于初始状态为空，因此两者的结果相同。但是，如果您要再次获取，比如分页时，它将保留旧值，如果与

concat

一起使用，则会保留新值。

data.data.courseDetails.userModuleDetailsV2

的内容是什么？我不确定这是否相关？因为您编写了``this.setState({courseData:this.state.courseData.concat（data.data.courseDetails.userModuleDetailsV2）})“`` OP询问的是

concat

或不在

setState

中。请仔细检查我的问题。我知道我们应该使用回调。我怀疑是使用concat还是正常分配数据@Julian@EmileBergeron你能回答我的问题吗？但是为什么我不能在这里播放我的视频呢？如果你想的话，这是我的令牌和api试试让jwtToken={“accessToken”：“78905c92-1ea8-49c0-8649-9b517b662c2c”}axios.post（“@lostcoder我现在正在解决您可能遇到的

concat

最可能的问题。

this.state.courseData.concat(data.data.courseDetails.userModuleDetailsV2)

[].concat(newValues)
// or just
newValues // if array
[newValues] // if something else

this.setState({
  courseData: this.state.courseData.concat(
    data.data.courseDetails.userModuleDetailsV2
  )
})
//=> [data.data.courseDetails.userModuleDetailsV2]

this.setState({
  courseData: data.data.courseDetails.userModuleDetailsV2
})
//=> data.data.courseDetails.userModuleDetailsV2

onFetchMore = (offset) => {
  fetchMoreAxiosCall(offset)
    .then(newData => this.setState(({ courseData }) => ({ 
      courseData: courseData.concat(newData)
    })))
}