Javascript 如何将无限卷轴与React Native一起使用？

每次用户滚动到底部时，我都会尝试获取新数据，如下所示：

<FlatList
    onEndReachedThreshold={0}
    onEndReached={LoadMoreRandomData}
    data={data}
    keyExtractor={(item) => item.email.toString()}
    renderItem={({ item }) => <Text style={{ marginVertical: 100 }}>{item.email}</Text>}
/>

问题是当调用useEffect时，整个屏幕会消失几秒钟

---

如何获取新数据并使用旧数据设置状态，而屏幕不闪烁？

您应该将API调用从

useffect（）

提取到一个单独的函数。当前，当

page

更改时，将调用

useffect（）

，它将重新显示整个屏幕

试着这样做：

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

const fetchData = () => {
 if (page !== 1) {
    setLoading(true);
    axios
        .get(`https://randomuser.me/api/?results=10&page=${page}`)
        .then((res) => {
            setData((prev) => res.data.results.concat(prev));
            setLoading(false);
        })
        .catch((e) => {
            setLoading(false);
        });
    }   
}

const LoadMoreRandomData = () => {
    setPage((prev) => prev + 1);
    fetchData();
};

---

您应该将API调用从

useffect（）

提取到一个单独的函数。当前，当

page

更改时，将调用

useffect（）

，它将重新显示整个屏幕

试着这样做：

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

const fetchData = () => {
 if (page !== 1) {
    setLoading(true);
    axios
        .get(`https://randomuser.me/api/?results=10&page=${page}`)
        .then((res) => {
            setData((prev) => res.data.results.concat(prev));
            setLoading(false);
        })
        .catch((e) => {
            setLoading(false);
        });
    }   
}

const LoadMoreRandomData = () => {
    setPage((prev) => prev + 1);
    fetchData();
};

---

您可能希望在那里使用

useCallback

钩子来防止函数被重新创建

const fetchData = useCallback(() => {
....
}, []);

这将使其性能更好，并将页面作为参数

const fetchData = useCallback((page) => {
...
}, []);

---

您可能希望在那里使用

useCallback

钩子来防止函数被重新创建

const fetchData = useCallback(() => {
....
}, []);

这将使其性能更好，并将页面作为参数

const fetchData = useCallback((page) => {
...
}, []);