React Native Flastlist 数据未通过连接数组进行分页更新

Question

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

简单的附加工作//setResult(response.data.response.products.data);

Concinate 不工作// setResult([...result, ...response.data.response.products.data]);

注意：也使用了 extraData道具但不起作用...

从'react'导入反应，{useState，useEffect，useContext}； 从'react-native'导入{ SafeAreaView，视图，文本，样式表，FlatList，ActivityIndi​​cator，}；

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>
  );
}

Answer 1

我认为您正在做的不是使用useState()挂钩的正确连接方式。 您需要知道，为了更新/连接，正确的方法是：

制作上一个项目的副本，并将其添加到包含更新数据的列表中。

// Here previousData is a copy of the previous list which is maintained in the state data
setResult(previousData => [...previousData, response.data.response.products.data]);

或者

setResult(previousData => {
    return [...previousData, response.data.response.products.data]
});

欣赏：顺便说一句，我喜欢你的工作 Ajay。 非常整洁和专业，继续努力👏🏻👏🏻