Как обернуть setState в React?

Question

[Артем]

Во время выполнения асинхронного запроса происходит размонтирование компонента, но по выполнению промиса указано выполнить изменение состояния. Как без ручного отслеживания смонтирован компонент или нет, запретить попытку изменения стейта? Сейчас реакт кидает варнинг в консоль. Это работает, но хотелось бы без предупреждения обойтись.

Answer 1

[Антон Спирин]

Вариант 1:

class Example extends React.Component {
  state = { data: [] };

  controller = new AbortController();
 
 componentDidMount() {
    fetch('/url', {
      signal: this.controller.signal,
    })
    .then(res => res.json())
    .then(data => this.setState({ data }));
  }
  
  componentWillUnmount() {
    this.controller.abort();
  }
  
  render(){
    return ( /* ... */ );
  }
}

Если используете axios: Cancellation

Вариант 2:
Использовать Redux и делать запросы в асинхронных действиях, обновляя по возвращению ответа store.

Comments

[Артем]

Правильно ли хранить в сторе флаги, используемые для запрета нажатия кнопки, пока выполняется запрос?
Такой флаг нужен только в одном компоненте. Описывать действия и редьюсеры, при этом занимая очередь сообщений редакса, чтобы просто задизейблить кнопку как по пушке из воробья.
Возможно есть какие-то бест практики, чтобы организовать такую работу?
При этом после выполнения запроса кнопку нужно активировать, но во время выполнения весь компонент может быть размонтирован.

[Антон Спирин]

Артем, просто флаг кнопки локального компонента в redux лучше не выносить, а вот хранение флагов состояния загрузки в redux хорошая практика. Его можете и использовать.
Пример организации редьюсера:

export default function product(state = initialState, action) { 
  switch(action.type) {
    case FETCH_PRODUCT_BY_SLUG:
      return {
        ...state,
        isFetching: true,
        error: null,
      };

    case FETCH_PRODUCT_BY_SLUG_SUCCEEDED:
      return {
        ...state,
        product: action.payload,
        isFetching: false,
        error: null,
      };

    case FETCH_PRODUCT_BY_SLUG_FAILED:
      return {
        ...state,
        isFetching: false,
        error: action.payload,
      };

    default:
      return state;
  }
}

Тогда в хандлере кнопки можно делать проверку:

handler = () => {
  const { isFetching } = this.props;

  if (isFetching) return;
  // ...
};

Можно пойти дальше и добавить это свойство в интерфейс кнопки:
<Button isProcessing={isFetching} title="Submit"/>
и когда isProcessing === true показывать в кнопке анимированную иконку лоадера.