Javascript 更新平面列表，拉动刷新，警告：列表中的每个子级都应该有一个唯一的；“关键”；

谢谢你的帮助

我正在尝试添加一个具有拉刷新功能的平面列表

发布到Firebase的操作和显示userPosts的平面列表在单独的配置文件屏幕上工作（通过自动更新redux状态更改，而不是拉到刷新）

控制台日志“之前的所有帖子”和“之后的所有帖子”显示firebase响应数组正在更新。就像现在的代码一样，当刷新被拉入时，会弹出一个空白的帖子，好像它知道它已经更新了，但是值或格式没有对齐

任何帮助都将不胜感激。再次感谢-马特

警告：列表中的每个子级都应该有一个唯一的“key”属性。%s%s有关详细信息，请参阅/fb.me/react-Warning-keys。%s，检查“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
    data={this.props.feed.allPosts}
    onRefresh={this.handleRefresh}                        
    refreshing={false}                        
    keyExtractor={(item) => item.id}                        
    renderItem={({ item }) =>
    <View><Text>{item.postDescription}</Text></View>
    }                           
/>```

item.id}
renderItem={（{item}）=>
{item.postDescription}
}                           
/>```

您需要在由

renderItem

返回的JSX上添加一个

键

属性。这是react优化所必需的

<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>
    }                           
/>

item.id}
renderItem={（{item}）=>
{item.postDescription}
}                           
/>

我通过分别从Firebase发送和修改每个post.data（）响应来解决这个问题，而不是首先创建一个要添加的post数组并尝试修改它

我猜有一种更有效的方法可以一步完成，而不是多次发送，但我不知道

    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)
        }
    }

---

谢谢，但那似乎不起作用。我认为这与我的Firebase反应有关。有没有可能我不是在现有的allPosts redux状态中添加内容，而是创建一个新的状态？例如，我想将现有的allPosts存储/数组插入一个新的post

[{new post}，{old posts}]

，但是我认为类似的事情正在发生

[{new post}]，{old posts}]

？我不确定。。。