使用 concat 与直接赋值时 setState 有什么区别吗？

Question

import React, { Component } from "react";

import axios from "axios";

import ReactPlayer from "react-player";

export default class DoctorData extends Component {

  state = {

    sidebarOpen: true,

    courseData: [],

    renderData: []

  };

  componentDidMount() {

    let jwtToken = { accessToken: "" };

    axios.post(" ", jwtToken).then(data => {

      console.log(data);

      this.setState({

        courseData: data.data.courseDetails.userModuleDetailsV2

      });

    });

  }

  RenderComponent = () => {

    console.log("we are inside sideBarComponet");

    return (

      <div className="card">

        {this.state.courseData.map((value, key) => {

          console.log(value);

          console.log("we are inside key", key);

          //   console.log(value.userLessonDetails[key].userChapterDetails[0].chapter.content)

          return (

            <div>

              <div className="card-header">

                <h4>Doctor-content</h4>

                <ReactPlayer

                  url={

                    value.userLessonDetails[0].userChapterDetails[0].chapter

                      .content

                  }

                  playing

                />

                {console.log(

                  "we are printing the content",

                  value.userLessonDetails[0].userChapterDetails[0].chapter

                    .content

                )}

                {console.log(typeof this.state.courseData)}

              </div>

            </div>

          );

        })}

      </div>

    );

  };

  render() {

    return (

      <div>

        {this.state.courseData.length ? (

          <div>{this.RenderComponent()}</div>

        ) : null}

        {console.log("fghjkl", this.state.courseData)}

        {this.state.courseData.length}

      </div>

    );

  }

}

Answer 1

.concat()该concat()方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。这证实在状态的不可变更新中使用是安全的。请注意，对于作为参数传递的任何值，它的工作原理相同，但有点扁平化数组。该concat方法创建一个新数组，该数组由调用它的对象中的元素组成，对于每个参数，按顺序依次是该参数的元素（如果该参数是一个数组）或该参数本身（如果该参数是不是数组）。它不会递归到嵌套数组参数中。[1].concat(['test'])&nbsp; &nbsp;//=> [1, "test"][1].concat('test')&nbsp; &nbsp; &nbsp;//=> [1, "test"][1].concat([['test']]) //=> [1, ["test"]].concat创建一个包含旧this.state.courseData值和接收到的新值的新数组。由于初始状态是一个空数组[]，除非data.data.courseDetails.userModuleDetailsV2不是数组，否则两者结果相同。this.state.courseData.concat(data.data.courseDetails.userModuleDetailsV2)相当于[].concat(newValues)// or justnewValues // if array[newValues] // if something else所以两者都是相同的，但.concat在这里是不必要的，因为它只会在内部调用一次，componentDidMount 除非 this.state.courseData预先填充了来自 props 或其他地方的默认数据。删除时不起作用.concat？这意味着它data.data.courseDetails.userModuleDetailsV2可能不是一个数组，并且您期望在 render 方法中有一个数组，但是当 axios 调用成功时（以及在 之后setState），它不再是数组了。this.setState({&nbsp; courseData: this.state.courseData.concat(&nbsp; &nbsp; data.data.courseDetails.userModuleDetailsV2&nbsp; )})//=> [data.data.courseDetails.userModuleDetailsV2]this.setState({&nbsp; courseData: data.data.courseDetails.userModuleDetailsV2})//=> data.data.courseDetails.userModuleDetailsV2话虽.concat如此，如果您要添加“获取更多”功能，那么使用它可能会很有用。onFetchMore = (offset) => {&nbsp; fetchMoreAxiosCall(offset)&nbsp; &nbsp; .then(newData => this.setState(({ courseData }) => ({&nbsp;&nbsp; &nbsp; &nbsp; courseData: courseData.concat(newData)&nbsp; &nbsp; })))}您可以只更新状态内所需的值，而无需传播旧状态 ( { ...state, courseData: /**/ }) 因为 ( source )：更新器的输出与状态浅合并。

Answer 2

相反，ReactpreviousState通过传递一个接受先前状态作为第一个参数的函数来提供，例如// generalthis.setState((oldState) => ({ ...oldState }));// useful for updating objectsthis.setState(({ myObject }) => ({&nbsp;&nbsp; &nbsp; myObject: { ...myObject, propToUpdate: true }&nbsp; }));