React response-switch Не удается выполнить обновление состояния React для неустановленного компонента - PullRequest
Новая
       4

React response-switch Не удается выполнить обновление состояния React для неустановленного компонента

0 голосов
/ 20 апреля 2020

Я пытаюсь написать React Component с помощью DataTable и response-switch.

Кажется, это работает, но когда я вижу консоль разработчика, появляется ошибка:

Предупреждение: Can ' выполнить обновление состояния React для неустановленного компонента. Это неоперация, но она указывает на утечку памяти в вашем приложении. Чтобы исправить, отмените все подписки и асинхронные задачи в методе componentWillUnmount.

Ошибка отображается только при «перетаскивании» коммутатора. Если я только нажму на переключатель, ошибки не будет. 

import React from 'react';
import { authenticationService } from '../../helpers/AuthenticationService';
import axios from 'axios';
import DataTable from 'react-data-table-component';
import Switch from "react-switch";


class ProductEshop extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            isCancelled: false,
            data: [],
            checked: false
        }
    }


    handleButtonClick = (state, row) => {

    this.setState({
            data: this.state.data.map((item, index) =>
                item.eshopId == row.eshopId ? { ...item, isActive: !item.isActive } : item,
            )
     })
    };

    componentDidMount() {
        const currentUser = authenticationService.currentUserValue;

        axios.get('/api/product/' + this.props.id + '/eshops', { headers: { "Authorization": `Bearer ${currentUser.token}` } }).then(res => {
            this.setState({ data: res.data });
        }).catch(err => {
            console.log(err);
        });
    }

    render() {
        const columns = (clickHandler => [

            {
                cell: (row) => <Switch onChange={(e) => clickHandler(e, row)} checked={row.isActive} />
            },
            {
                name: 'Název',
                selector: 'name',
                sortable: true,
            }
        ]);

        return (<div>
            <DataTable
                title="Products"
                data={this.state.data}
                columns={columns(this.handleButtonClick)}
                onRowSelected={this.handleChange}
                paginationComponentOptions={this.state.paggination}
                pagination
                dense
            />
        </div>)
    }
}

export default (ProductEshop)

Может кто-нибудь помочь, пожалуйста?

ОБНОВЛЕНИЕ: ошибка создана в handleButtonClick

1 Ответ

0 голосов
/ 20 апреля 2020

Это происходит потому, что this.setState вызывается в асинхронном c процессе. Это означает, что даже если вы отключите компонент, Ax ios попытается выполнить then, и поэтому вы получите предупреждение. Вам необходимо отменить запрос на componentWillUnmount

  componentDidMount () {
    this.axiosCancelSource = axios.CancelToken.source()

   axios.get('/api/product/' + this.props.id + '/eshops', 
  { headers: { "Authorization": `Bearer ${currentUser.token}` }, 
    cancelToken: this.axiosCancelSource.token })
   .then(res => {
            this.setState({ data: res.data });
        }).catch(err => {
            console.log(err);
      });
  }

  componentWillUnmount () {
    this.axiosCancelSource.cancel('Axios request canceled.')
  }
...