更新平面列表、下拉刷新、警告：列表中的每个子项都应具有唯一的"key"

Question

感谢您的帮助。。。

我正在尝试添加一个具有拉伸刷新能力的平面主义者。

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

控制台日志"allPosts-before"one_answers"allPosts-after"显示firebase响应数组正在更新。就像现在的代码一样，当刷新时，会弹出一个空白的帖子，好像它知道自己已经更新了，但值或格式没有对齐。

如有任何帮助，我们将不胜感激。再次感谢-马特

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
data={this.props.feed.allPosts}
onRefresh={this.handleRefresh}                        
refreshing={false}                        
keyExtractor={(item) => item.id}                        
renderItem={({ item }) =>
<View><Text>{item.postDescription}</Text></View>
}                           
/>```

Answer 1

您需要在renderItem返回的JSX上添加一个key属性。这是通过反应进行优化所必需的

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

Answer 2

我通过单独调度和修改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)
}
}