Reaction Use Effect引发错误：无法对卸载的组件执行Reaction状态更新 [英] React useEffect throws error: Can't perform a React state update on an unmounted component

问题描述

我正在为我的Spotify API应用程序使用REACTIVE-Native，当我想用axios从我的服务器获取数据时(在useEffect中，因为我想在组件加载时呈现返回的项)，它抛出错误：Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function。因此，如果有人知道如何解决这个问题，我将是非常伟大的。

import React, {useEffect, useState} from 'react'
import { View, Text, StyleSheet, Image, FlatList, ActivityIndicator} from 'react-native'
import axios from 'axios';
import AsyncStorage from '@react-native-async-storage/async-storage';

export default function ArtistsCom({route}) {
    const type = route.name.toLowerCase();
    const [time, setTime] = useState('short_term');
    const [access_token, setAccess_token] = useState('');
    const [refresh_token, setRefresh_token] = useState('');
    const [items, setItems] = useState([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        setLoading(true);
        AsyncStorage.getItem('refresh_token')
        .then(value => setRefresh_token(value));

        const getDataAsync = async () => {
            const res = await axios.post(`http://localhost:3001/api/refresh`, {
                headers: {
                    body: {
                        refresh_token: refresh_token
                    }
                }
            })
            console.log(res);
            setAccess_token(res.data.access_token);
            return res;
        };
        getDataAsync();
    }, []);

    return (
        <View>
            <View>
                {!loading ? items.map((item, key) => {
                    return (
                        <View key={key} style={{width: 150, height: 150, margin: 10}}>
                            <Image style={{width: '100%', height: '100%'}} source={{uri: type == 'artists' ? item.images[0].url : item.album.images[0].url}} />
                            <View style={{position: 'absolute', bottom: 0, left:4,  height: 20, width: '100%', backgroudColor: 'red'}}><Text style={{color: 'white'}}>{key+1}. {item.name}</Text></View>
                        </View>
                    )
                }) : <Text>Loading...</Text>}
            </View>
        </View>
    )
}

推荐答案

您可以使用取消令牌取消正在进行的请求。

useEffect(() => {
  ...

  // Create cancel token and source
  const CancelToken = axios.CancelToken;
  const source = CancelToken.source();

  const getDataAsync = async () => {
    const res = await axios.post(
      `http://localhost:3001/api/refresh`,
      {
        cancelToken: source.token, // <-- attach cancel token to request
        headers: {
          body: {
            refresh_token: refresh_token
          }
        }
      },
    );
    console.log(res);
    setItems(res.data.items);
    return res;
  };
  getDataAsync();

  // Return useEffect cleanup function to cancel request
  return () => {
    source.cancel('Component unmounted'); // message is optional
  };
}, []);

更新

将异步逻辑包含在try/catch/finally中，以发出多个请求并处理任何被拒绝的承诺和错误。

useEffect(() => {
  // Create cancel token and source
  const CancelToken = axios.CancelToken;
  const source = CancelToken.source();

  const getDataAsync = async () => {
    setLoading(true);

    try {
      const refresh_token = await AsyncStorage.getItem('refresh_token');
      const res = await axios.post(
        `http://localhost:3001/api/refresh`,
        {
          cancelToken: source.token, // <-- attach cancel token to request
          headers: {
            body: {
              refresh_token
            }
          }
        },
      );

      const { access_token } = res.data;
      setAccess_token(access_token);

      const res2 = await axios.get(`http://localhost:3001/api/top/${type}?time_range=${time}&limit=50&access_token=${access_token}`);
      setItems(res2.data.items);
    } catch(error) {
      // handle any errors, log them, set some state, etc...
    } finally {
      setLoading(false);
    }
  };

  getDataAsync();

  // Return useEffect cleanup function to cancel request
  return () => {
    source.cancel('Component unmounted'); // message is optional
  };
}, [refreshToken]);

这篇关于Reaction Use Effect引发错误：无法对卸载的组件执行Reaction状态更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！