Why do I get "Use callback in setState when referencing the previous state"?

user_11140119 0
Viewed 4668

I'm learning React and I have ESLint installed in my project. It started giving me errors like:

Use callback in setState when referencing the previous state react/no-access-state-in-setstate

In my React component I have a constructor:

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

In my function I have:

  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 });
      });
    });
  };

I understand that it is not correct to use this.state within setState, but how can I resolve this error?

eslint reactjs javascript
2 Answers

Instead of this:

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

Do this:

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

You're not supposed to directly or indirectly reference this.state in what you eventually pass to this.setState.

user_75090650

If you have to mutate the state (e.g. adding an item) then you can pass a function to setState that receives the previous and returns the next state:

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

It will be way faster to add all items at once though:

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