مشکل کار با flatlist در react native

[قاسم]

با سلام.من می خوام با رسیدن به انتهای لیست, دیتای بیشتری از سرور گرفته بشه و توسط flatlist رندر بشه.ولی با رسیدن به انتهای لیست و اضافه شدن دیتای جدید به state, فلت لیست بارها و بارها دیتا رو از اول رندر میکنه و متوقف نمیشه.ممنون میشم راهنمایی کنید.

JavaScript

<SafeAreaView> <FlatList data={this.state.list} keyExtractor={keyExtractor} renderItem={this.renderItem} onEndReached={this.loadMore} onEndReachedThreshold={0.8} ListFooterComponent={this.renderFooter()} ListFooterComponentStyle={{margin: 20}} /> </SafeAreaView>

1 2 3 4 5 6 7 8 9 10 11 12 13

<SafeAreaView>                 <FlatList                     data={this.state.list}                     keyExtractor={keyExtractor}                     renderItem={this.renderItem}                     onEndReached={this.loadMore}                     onEndReachedThreshold={0.8}                     ListFooterComponent={this.renderFooter()}                     ListFooterComponentStyle={{margin: 20}}                 />             </SafeAreaView>

و متد loadmore

JavaScript

this.setState({fetchingStatus: true, page: this.state.page+1}); return fetch('http://192.168.1.2/movie/api/movie.php/?page='+this.state.page) .then((response) => response.json()) .then((responseJson) => { this.setState({ list: [...this.state.list, ...responseJson], fetchingStatus: false, }); }) .catch((error) => { console.error(error); });

1 2 3 4 5 6 7 8 9 10 11 12 13 14

this.setState({fetchingStatus: true, page: this.state.page+1});         return fetch('http://192.168.1.2/movie/api/movie.php/?page='+this.state.page)         .then((response) => response.json())         .then((responseJson) => {         this.setState({                 list: [...this.state.list, ...responseJson],                 fetchingStatus: false,             });         })          .catch((error) => {            console.error(error);         });

[مهدی حسن زاده]

سلام
در ظاهر که مشکلی دیده نمیشه به جز keyextractor
keyextractor رو روی یک item منحصر به فرد set کنید

[قاسم]

JavaScript

const keyExtractor = item => item.id.toString();

1 2 3

const keyExtractor = item => item.id.toString();

ولی هنوز مشکل پابرجاست

[مهدی حسن زاده]

با دکمه دیتای جدید رو میگیرید یا با scroll

[مهدی حسن زاده]

اگر بر طبق این آموزش پیش برید مشکلی نخواهید داشت
https://reactapp.ir/?p=33104

[نویسنده]

نوشته‌ها