为什么我会得到“引用前一个状态时在setState中使用回调”？

Question

我正在学习React，并且在我的项目中安装了ESLint。它开始给我一些错误，比如：

在setState中引用之前的状态react/no access状态时，在setState中使用回调

在我的React组件中，我有一个构造函数：

  constructor() {
    super()
    this.state = {
      currentIdVehicle: null,
      currentIdModel: null,
      currentIdVehicleFinal: null,
      marca: [],
      veiculo: [],
      modeloEAno: [],
      vehicleFinal: [],
      infoTable: [],
    };
  }

在我的职能中，我有：

  getMarca = () => {
    this.setState({ marca: [], veiculo: [], modeloEAno: [] });
    api.get(`/marcas.json`).then(res => {
      res.data.map((item) => {
        const joined = this.state.marca.concat([
          { name: item.name, id: item.id },
        ]);
        this.setState({ marca: joined });
      });
    });
  };

我理解在setState中使用this.state是不正确的，但我如何解决此错误？

Answer 1

如果必须改变状态（例如添加项目），则可以将函数传递到setState，该函数接收上一个状态并返回下一个状态：

  this.setState(previousState => ({ marca: [...previousState.marca, { name: item.name, id: item.id }] }));

一次添加所有项目会更快，不过：

 this.setState(previousState => ({
   marca: [
    ...previousState.marca,
    ...res.data.map((item) => ({ name: item.name, id: item.id }))
   ],
 }));

Answer 2

而不是这样：

      res.data.map((item) => {
        const joined = this.state.marca.concat([
          { name: item.name, id: item.id },
        ]);
        this.setState({ marca: joined });
      });

这样做：

      res.data.map((item) => this.setState(prevState => {
        const joined = prevState.marca.concat([
          { name: item.name, id: item.id },
        ]);
        return({ marca: joined });
      }));

您不应该直接或间接引用this.state在您最终传递给this.setState的内容中。