перенаправить страницу

Question

Я получаю данные через API, используя React. Но когда я перенаправляю, я получаю сообщение об ошибке, вы можете помочь? Огромное спасибо.

Большое спасибо

componentDidMount() {
       fetch(`${this.domain}/api/debt/list?customer=` + this.props.customerInfo.customer.ID, {
           headers: {
               Authorization: `Bearer ${localStorage.getItem('id_token')}`,
               "Content-Type": "application/json",
           }
       })
           .then(res => {
               if (res.ok) {
                   return res.json();
               } else {
                   return res.json().then(err => Promise.reject(err));
               }
           })
           .then(json => {
               this.setState({
                   items: json
               });
               // console.log(json)
           })
           .catch(error => {
               //console.log('request failed:', error);
               return error;
           });
   }

   render() {
     const { isLoaded, items } = this.state;

     if (this.props.customerInfo.customer.ID === "-1") {
           return <Redirect to={"/customerlist"}/>
     }

Предупреждение. Не удается выполнить обновление состояния React на отключенном компоненте. Это не работает, но это указывает на утечку памяти в вашем приложении. Чтобы исправить, отмените все подписки и асинхронные задачи в методе componentWillUnmount. в AuthWrapped (создан ConnectFunction) в ConnectFunction (в DefaultLayout.js: 73) в Route (в DefaultLayout.js: 68)

Answer 1

Я считаю, что это происходит, когда у вас есть this.props.customerInfo.customer.ID === "-1" истина. В этом случае вы перенаправляете, но вызов API, который вы сделали, еще не завершен, и после его завершения вы используете setState для компонента, который не существует, поскольку вы уже перенаправили.

1) Самый простой способисправить это перед использованием setState поставить условную проверку для случая, в котором вы перенаправили или лучше у вас есть отдельный флаг, чтобы проверить это.

constructor(){
    this.isComponentDestroyed = false;
}

componentDidMount(){
    fetch(...)
    .then(()=>{
        if(!this.isComponentDestroyed){
            this.setState({
                items: json
            });
        }
    })
}

componentWillUnmount(){
    this.isComponentDestroyed = true;
}

2) Вы также можете проверить, как отменитьfetch звонок. Ссылка Как отменить запрос HTTP fetch ()?

---

Из комментариев добавьте ссылку на Как отменить выборку для componentWillUnmount