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

Question

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

引用前一个状态 react/no-access-state-in-setstate 时在 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 });
      });
    });
  };

我知道this.state在 内使用是不正确的setState，但我该如何解决这个错误？

Answer 1

取而代之的是：

      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.