Question

我将代码重构为使用useEffect钩子，而不是使用类，但是刷新结果时出现内存泄漏。我确实使用过useEffect，但仍然收到错误消息，不确定我的代码在哪里出错。

我收到以下错误：

警告：通过useState（）和useReducer（）挂钩进行状态更新不支持第二个回调参数。产生副作用渲染后，使用useEffect（）在组件主体中声明它。

      import React, { useEffect, useState} from 'react';
      import { FlatList, View, TouchableHighlight } from 'react-native';
      import { USANews } from '../components/fetchNews';
      import Article from '../components/Article';


      const  homeScreen = ({ handleRefresh, navigation, }) => {
        const [state, setState] = useState({articles: [], refreshing: true});

        useEffect (() => {
          fetchNews();
        }, )

        const fetchNews = () => {
          USANews() .then(articles => {
              setState({ articles, refreshing: false });
            })
            .catch(() => setState({ refreshing: false }));
        };

        handleRefresh = () => {
          setState({ refreshing: true }, () => fetchNews());
        };

          return (
            <View style={{backgroundColor: '#fffafa'}}>
            <FlatList
              data={state.articles}
              keyExtractor={item => item.url}
              refreshing={state.refreshing}
              onRefresh={handleRefresh}
              renderItem ={({item}) => {
                return (
                <TouchableHighlight onPress={() => navigation.navigate('Detail', 
                {title: item.title, description: item.description, urlToImage: item.urlToImage})}
                >
                <Article article={item} />
                </TouchableHighlight>
                );
            }} 
            />
          </View>
          );

      }

      export default homeScreen;

Answer 1

从setState({ refreshing: true }, () => fetchNews())中的handleRefresh中删除多余的参数。

也许还会在效果中将state添加到依赖项数组中，因此它仅在state更新时运行，除非您希望在组件呈现的任何时间发生提取。 / p>

确保useEffect挂钩已更新useState（）挂钩？

1 个答案: