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。

Answer 2

如果您必须更改状态（例如添加项目），则可以将函数传递给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 }))
   ],
 }));

为什么会出现“在引用先前状态时在setState中使用回调”？

2 个答案: