This question already has answers here:
FlatList calls `onEndReached` when it's rendered
(11个答案)
在4个月前关闭。
我正在做一个 native react 项目,用户可以使用Flickr API搜索图像,其他所有工作都很好,但是实现分页时遇到了问题。我已经使用FlatList的
(11个答案)
在4个月前关闭。
我正在做一个 native react 项目,用户可以使用Flickr API搜索图像,其他所有工作都很好,但是实现分页时遇到了问题。我已经使用FlatList的
onEndReached
来检测用户何时滚动到列表的末尾,但是问题是onEndReached
被调用了多次(包括在第一次渲染过程中被调用一次)。我什至禁用了弹跳,就像here所说的,但它仍然被多次调用 export default class BrowserHome extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading: false,
tagParam: "cat",
pageNum: -1,
data: [],
photosObj: ""
};
}
componentDidMount() {
this.setState({
isLoading: true
});
try {
this.makeRequest();
} catch {
console.log("error has occurred");
}
}
makeRequest = () => {
const { tagParam, pageNum } = this.state;
let url = `https://api.flickr.com/services/rest/?
method=flickr.photos.search
&api_key=${apiKey}&format=json&tags=${tagParam}
&per_page=30&page=${pageNum + 1}&nojsoncallback=1`;
fetch(url, {
method: "GET"
})
.then(response => response.json())
.then(responseJSON => {
this.setState({
data: this.state.data.concat(responseJSON.photos.photo),
isLoading: false,
pageNum: responseJSON.photos.page
});
})
.catch(error => {
console.log(error);
this.setState({ isLoading: false });
throw error;
});
};
render() {
if (this.state.isLoading) {
return <ActivityIndicator animating={true} size="large" />;
}
return (
<View
style={{
flex: 1,
height: 200,
justifyContent: "flex-start",
width: screenSize.width,
backgroundColor: "black"
}}
>
<Text>This is browserhome</Text>
<FlatList
style={{
width: screenSize.width
}}
numColumns={3}
data={this.state.data}
keyExtractor={item => item.id}
bounces={false}
onEndReachedThreshold={1}
onEndReached={({ distanceFromEnd }) => {
this.loadMoreItem();
alert("end reached call");
}}
renderItem={({ item, index }) => (
<>
<ImageTile imageURL={this.createImageURL(item)} />
// <Text style={{ color: "white" }}>
// {index}
// {console.log(index)}
// </Text>
</>
)}
/>
</View>
);
}
createImageURL(item) {
let server = item.server,
id = item.id,
secret = item.secret;
let urlString = `https://farm${
item.farm
}.staticflickr.com/${server}/${id}_${secret}_s.jpg`;
return urlString;
}
loadMoreItem() {
this.makeRequest();
}
}
最佳答案
这个解决方案对我有用。在 FlatList 组件中添加onMomentumScrollBegin并修改onEndReached。
<FlatList
style = { ...}
data = {data}
initialNumToRender = {10}
onEndReachedThreshold = {0.1}
onMomentumScrollBegin = {() => {this.onEndReachedCalledDuringMomentum = false;}}
onEndReached = {() => {
if (!this.onEndReachedCalledDuringMomentum) {
this.retrieveMore(); // LOAD MORE DATA
this.onEndReachedCalledDuringMomentum = true;
}
}
}
/>
关于ios - FlatList onEndReached被多次调用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/53408470/
10-09 17:25