Почему я получаю «Использовать обратный вызов в setState при обращении к предыдущему состоянию»?

Question

Я изучаю React, и у меня установлен ESLint в моем проекте. Это начало давать мне ошибки, такие как:

Использовать обратный вызов в 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 }))
   ],
 }));