javascript - Why do I get "Use callback in setState when referencing the previous state"? - Stack Overflow

admin管理员组

文章数量:1288087

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 ponent 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?

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 ponent 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?

• javascript
• reactjs
• eslint

Share Improve this question Follow edited Jun 22, 2019 at 17:29 Boann 50k1616 gold badges124124 silver badges152152 bronze badges asked Jun 22, 2019 at 17:26 Felipe NokaFelipe Noka 10733 silver badges99 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

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.

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

本文标签： javascriptWhy do I get quotUse callback in setState when referencing the previous statequotStack Overflow