React Native Flastlist数据不更新，使用conate数组进行分页

Question

我正在使用React Native Flatlist进行分页，但在应用排序或过滤后无法重新渲染。

简单附加工作//setResult（response.data.response.products.data）

与协奏不起作用 // 集结果（[...结果。。。响应数据响应产品数据）;

注意:也使用了extraData prop，但不起作用...

从“react”导入React，{useState，useEffect，use context }；从“react-native”导入{ SafeAreaView，View，Text，StyleSheet，FlatList，ActivityIndicator，}；

export default function GrSubCategoryLevel2(props) {
  const {navigation} = props;
  const [loading, setLoading] = useState(true);
  const [hasError, setHasError] = useState(false);
  const [result, setResult] = useState([]);
  const [data, setData] = useState([]);
  const [page, setPage] = useState(1);
  const [loadMore, setLoadMore] = useState(true);

  const [popularValue, setPopularValue] = useState(null);
  const [priceValue, setPriceValue] = useState('');

  useEffect(() => {
      fetchData(page);
    }
  }, []);


  const fetchData = async (page) => {
    if (loadMore) {
      const request = subCategoriesLevel2(page);
      try {
        const response = await axios({
          url: request.url,
          method: request.method,
          data: request.data,
          headers: {
            'Content-Type': 'application/json',
            'Accept-Language': 'en',
            Accept: 'application/json',
          },
        });
        if (!response.data.error) {
          setData(response.data.response);
          if (response.data.response.products.data.length > 0) {
            setResult([...result, ...response.data.response.products.data]);
            //setResult(response.data.response.products.data); 
            if (response.data.response.products.next_page_url !== null) {
              setPage(page + 1);
              setLoadMore(true);
            } else {
              setLoadMore(false);
            }
          }
          setLoading(false);
        }
      } catch (error) {
        if (error) {
          console.log('Error', error.message);
        }
      }
    }
  };

 

  const renderItem = ({item}) => (
    <SubCategoryProduct
      data={item}
      navigation={navigation}
    />
  );

  return (
      <SafeAreaView style={styles.container}>
        <Navbar navigation={navigation} />
        <View style={styles.container}>
            <View style={styles.container}>
              <View style={styles.subCategoryList}>
                <FlatList
                  data={result}
                  extraData={result}
                  renderItem={renderItem}
                  showsVerticalScrollIndicator={false}
                  columnWrapperStyle={{justifyContent: 'space-between'}}
                  numColumns={3}
                  keyExtractor={(item, index) => item.id}
                  onEndReached={() =>
                    fetchData()
                  }
                 
                  stickyHeaderIndices={[0]}
                  ListFooterComponent={
                    <View style={styles.loaderFooter}>
                      {loadMore && (
                        <ActivityIndicator
                          color={Colors.secondary}
                          size="small"
                        />
                      )}
                    </View>
                  }
                />
              </View>
            </View>
        </View>
      </SafeAreaView>
  );
}