'How to stop Flatlist disaplaying same items multiple times in react native?
I'm novice of programming and I'm practicing react native to make my propre apps. My problem : when I'm using Flatlist, it renders multiple times same items which are fetched by datastore. I have for the time being totally 9 items in the array of 'Today' data which contains words, definition and pronunciation.
This is schema.graphql :
enum Genders {
MALE
FEMALE
OTHER
}
type User @model @auth(rules: [{allow: public}]) {
id: ID!
name: String!
bio: String!
age: String!
gender: Genders!
image: String
sub: String!
}
type Today @model @auth(rules: [{allow: private}]) {
id: ID!
word: String!
pronunciation: String
definition: String!
}
And Flatlist brings 9 times my feed ui whenever it calls item inside. I hope I explained well whole this..
my HomeScreen code is like this (I'm fetching datas from DataStore of aws amplify.
import React, { useState, useEffect } from 'react';
import { View, FlatList } from 'react-native';
import Title from '../../components/Title'
import { Today } from '../../models';
import Feed from '../../components/Dic/components/Feed';
import {DataStore} from '@aws-amplify/datastore';
const HomeScreen = () => {
const [todays, setTodays] = useState([]);
useEffect (() => {
const fetchTodays = async () => {
setTodays(await DataStore.query(Today));
};
fetchTodays();
},[]);
return (
<View style={{backgroundColor:'white', height: 1000}}>
<Title />
<FlatList
data={todays}
renderItem={({item}) => <Feed note={todays} /> }
// I don't know why I can't use 'item' instead of 'todays' after note but <Feed note={item} /> doesn't work.
/>
</ View>
)
}
export default HomeScreen;
Here is my feed code.
import React, { useState, useEffect } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import styles from './styles';
import Icon from 'react-native-vector-icons/AntDesign';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
const Feed = props => {
const {note} = props;
const [currentIndex, setCurrentIndex] = useState(0);
const [nextIndex, setNextIndex] = useState(currentIndex + 1);
const [prevIndex, setPrevIndex] = useState(currentIndex - 1);
const prevWord = note[prevIndex];
const currentWord = note[currentIndex];
const nextWord = note[nextIndex];
console.warn[note];
useEffect (() => {
if (currentIndex < 0) {
setCurrentIndex(value=0);
return;
}
if (currentIndex >= note.length){
setCurrentIndex(value=note.length -1);
}
}, deps=[currentIndex]);
const onPressedRight = () => {
setCurrentIndex(currentIndex + 1);
};
const onPressedLeft = () => {
setCurrentIndex(currentIndex - 1);
};
return (
<View>
<View Style={styles.headerContainer}>
<View style={styles.card}>
<TouchableOpacity style={styles.headerLeft} onPress={onPressedLeft}>
<MaterialIcons name="signal-cellular-null" size={40}
style={{marginLeft:30,
transform : [{rotate: '135deg'}],
marginRight: -25,
}}/>
</TouchableOpacity>
<View style={styles.headerOutline}>
<View style={styles.header}>
{currentWord && (
<Text style={styles.text}>{currentWord.word} <Icon name="sound" size={20} color='#ff8c8c'/></Text>
)}
{currentWord && (
<Text style={styles.pronunciation}>{currentWord.pronunciation}</Text>
)}
</View>
</View>
<TouchableOpacity style={styles.headerRight} onPress={onPressedRight} >
<MaterialIcons name="signal-cellular-null" size={40}
style={{marginLeft:30,
transform : [{rotate: '-45deg'}],
marginLeft: -57,
}}/>
</TouchableOpacity>
</View>
</View>
<View style={styles.bodyContainer}>
<Text style={styles.defiText}>Definition</Text>
{currentWord &&(<Text style={styles.defi}>{currentWord.definition}</Text>
)}
</ View>
</View>
);
}
export default Feed;
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
