Обновить Flatlist, оттянуть до Refre sh, Предупреждение: каждый дочерний элемент в списке должен иметь уникальный «ключ» - PullRequest
Новая
       179

Обновить Flatlist, оттянуть до Refre sh, Предупреждение: каждый дочерний элемент в списке должен иметь уникальный «ключ»

0 голосов
/ 09 мая 2020

Спасибо за любую помощь ...

Я пытаюсь добавить плоский список с возможностью обновления sh.

Мои действия, которые публикуются в Firebase, работают, и мой плоский список, показывающий userPosts, работает на отдельном экране профиля (через автоматическое обновление изменения состояния redux вместо обновления sh).

журналы консоли «allPosts before» и «allPosts after» показывают, что массив ответов firebase обновляется. Как сейчас код, при извлечении refre sh появляется пустой пост, как будто он знает, что он обновлен, но значения или форматы не выровнены.

Любая помощь будет принята с благодарностью. Еще раз спасибо. -Matt

Warning: Each child in a list should have a unique "key" prop.%s%s See /fb.me/react-warning-keys for more information.%s, Check the render method of `VirtualizedList`.

Действия: 

//get first five posts
export const getPosts = () => {
    return async (dispatch) => {
        try {
            const posts = await Fire.shared.db.collection('posts').orderBy("timestamp", "desc").limit(5).get() //get all the posts'

            let array = []
            posts.forEach((post) => {
                array.push(post.data())
            })

            dispatch({ type: 'GET_POSTS', payload: array })
        } catch (e) {
            console.error(e)
        }
    }
}

//get additional posts
export const addPostsBefore = (getState) => {
    return async (dispatch, getState) => {
        try {
            console.log("array.allPosts before addPostsBefore: " + JSON.stringify(getState().feed.allPosts.length) )
            const posts = await Fire.shared.db.collection('posts').where('timestamp', '>=', getState().feed.allPosts[0].timestamp).orderBy("timestamp", "asc").limitToLast(10).get() 
            if (posts) {
                console.log("Firebase response to be added: " + posts )
                let array = []
                posts.forEach((post) => {
                    array.push(post.data())
                })
                console.log("array.length: " + array.length )
                dispatch({ type: 'TO_BE_ADDED', payload: array })
                console.log("array.allPosts after addPostsBefore: " + JSON.stringify(getState().feed.allPosts.length) )
            } else {
                return null
            }
        } catch (e) {
            console.error(e)
        }
    }
}

Редуктор: 

let feedDefaultState = {}
const feed = (state = feedDefaultState, action) => {
     switch (action.type) {
        case 'TO_BE_ADDED':
            return {...state, allPosts: [action.payload, ...state.allPosts]}
        case 'GET_POSTS':
            return { ...state, allPosts: action.payload }
        default:
            return state
    }
}

Экран / Flatlist: 

<FlatList
    data={this.props.feed.allPosts}
    onRefresh={this.handleRefresh}                        
    refreshing={false}                        
    keyExtractor={(item) => item.id}                        
    renderItem={({ item }) =>
    <View><Text>{item.postDescription}</Text></View>
    }                           
/>```

Ответы [ 2 ]

1 голос
/ 09 мая 2020

Вам необходимо добавить атрибут key в JSX, возвращаемый renderItem. Это требуется в качестве оптимизации с помощью реакции 

<FlatList
    data={this.props.feed.allPosts}
    onRefresh={this.handleRefresh}                        
    refreshing={false}                        
    keyExtractor={(item) => item.id}                        
    renderItem={({ item }) =>
    <View key={item.id}><Text>{item.postDescription}</Text></View>
    }                           
/>
0 голосов
/ 10 мая 2020

Я решил проблему, отправляя и изменяя каждый ответ post.data () от Firebase отдельно, вместо того, чтобы сначала создавать массив добавляемых сообщений и пытаться это исправить.

Я предполагаю, что есть более эффективный способ сделать это за один шаг вместо нескольких отправок, но я этого не знаю. 

    return async (dispatch, getState) => {
        try {
            const posts = await Fire.shared.db.collection('posts').where('timestamp', '>', getState().feed.allPosts[0].timestamp).orderBy("timestamp", "asc").limitToLast(10).get() 
            posts.forEach((post) => {
                 dispatch({ type: 'TO_BE_ADDED', payload: post.data()})
            })
        } catch (e) {
            console.error(e)
        }
    }
...