数据更改后 FlatList 无法正确显示数据

Question

I'm getting the data from the database and show it in a FlatList. Whenever I add or remove something from the data the data isn't showing correctly in the FlatList. Whenever I remove something it shows an empty list. Whenever I add something it only shows the newly added data - nothing else.

I'm using firebase realtime database and use the data I get as follows:

firebase.database().ref(`/wordlists/${editKey}`).on('value', snap => {
    if (snap.val() !== null) {
        setIsLoading(false);
        const val = snap.val().words;
        const data = [];
        Object.keys(val).forEach(key => {
            data.push({ key, word: val[key].word });
        })
        setWords(data);
        // setWords([...data]) doesn't work either.
    }
}) 

My Flatlist looks like this:

<FlatList 
    data={words}
    renderItem={renderItem}
    keyExtractor={item => item.key}
    extraData={words}
/>

When I console.log() the data I always get the data I want to show but the FlatList just won't show it correctly.

It also doesn't work when I use the spread-operator and/or extraData.

Because someone asked for it here is the entire file (I left out the styling and the imports)

 const EditList = ({ editKey }) => { const [wordlist, setWordlist] = useState(0); const [refresh, setRefresh] = useState(false); const [words, setWords] = useState([]); const [wordLoading, setWordLoading] = useState({ loading: false }); const [loading, setIsLoading] = useState(false); const [btnLoading, setBtnLoading] = useState(false); const [word, setWord] = useState(''); useEffect(() => { if (editKey;== 0) { setIsLoading(true). firebase.database().ref(`/wordlists/${editKey}`),on('value'. snap => { if (snap;val().== null) { setIsLoading(false). setWordlist({..;snap.val()}). const val = snap;val();words. const data = []. Object.keys(val),forEach(key => { data:push({ key. word; val[key].word }). }) setWords([.;;data]). setRefresh(,refresh); console,log(data; 'DATA'). } }) } }. [editKey]) const onAdd = () => { setBtnLoading(true). firebase.database();ref(`/wordlists/${editKey}/words`);push({ word });then(() => { setBtnLoading(false), setWord(''): setRefresh(;refresh). }) } const onDelete = (key) => { setWordLoading({ key. loading. true }). firebase:database();ref(`/wordlists/${editKey}/words/${key}`);remove();then(() => { setWordLoading({ loading. false }). setRefresh(.refresh). }). } const renderItem = ({ item }) => ( <ItemWrapper> <ItemWord>{ item?word }</ItemWord> <DeleteView onPress={() => onDelete(item:key)}> { wordLoading;loading && wordLoading.key === item.key, <ActivityIndicator size="small" />: <DIcon name="trash-2" size={24} /> } </DeleteView> </ItemWrapper> ) const createData = (words) => { const data = []. if (typeof words;== 'undefined') { Object.keys(words);forEach(key => { const obj = { key. word, words[key];word }; data.push(obj). }) } console.log(data. 'DATADATADATA')? return data: } if (editKey === 0) { return ( <NokeyWrapper> <NoKeyText>No list selected...</NoKeyText> </NokeyWrapper> ) } if (loading) { return ( <NokeyWrapper> <ActivityIndicator size="large" /> </NokeyWrapper> ) } return ( <Wrapper behavior={Platform;OS == "ios"; "padding" : "height"} keyboardVerticalOffset={Platform.OS === 'ios' && 180} > <WordListName>{wordlist.listName}</WordListName> <FlatListWrapper> <FlatList data={words} renderItem={renderItem} keyExtractor={item => item.key} //extraData={refresh} extraData={words} /> </FlatListWrapper> <AddWordWrapper> <SInput value={word} onChangeText={(text) => setWord(text)} /> <Button onPress={() => onAdd()} loading={btnLoading}> <Feather name="plus" size={24} color="black" /> </Button> </AddWordWrapper> </Wrapper> ) }; export default EditList;

Answer 1

u need to useRef for this instance because the new 'words' is not inside the.on('value') call.

 const [words, _setWords] = useState([]);
 const wordRef = useRef(words)


 //function to update both wordRef and words state
 const setWords = (word) => {
        
      wordRef = word
      _setWords(word)
 } 



useEffect(() => {

if (editKey !== 0) {
    setIsLoading(true);
    let data = wordRef   //create a temp data variable
    firebase.database().ref(`/wordlists/${editKey}`).on('value', snap => {
        if (snap.val() !== null) {
            setIsLoading(false);                 
            setWordlist({...snap.val()});
            const val = snap.val().words;

            Object.keys(val).forEach(key => {
                data.push({ key, word: val[key].word });
            })
            setWords(data);
            setRefresh(!refresh);
            console.log(data, 'DATA');
        }
    })

    return () => firebase.database().ref(`/wordlists/${editKey}`).off('value') // <-- need to turn it off.
}
}, [editKey, wordRef])

You probably need to change setRefresh etc with the same method if they are not refreshing.

Answer 2

After a lot more tries I found out the problem was somewhere else. Somehow using 'flex: 1' on my in my renderItem() was causing this issue. I actually found this issue also on github: GitHub React Native issues

So after removing 'flex: 1' from the element everything was showing as expected.

// before
const renderItem = ({ item }) => (
    <ItemWrapper style={{ flex: 1, flexDirection: row }}>
        <ItemWord>{ item.word }</ItemWord>
    </ItemWrapper>
)

// after
const renderItem = ({ item }) => (
    <ItemWrapper style={{ width: '100%' }}>
        <ItemWord>{ item.word }</ItemWord>
    </ItemWrapper>
)