Javascript 当数据更新时，React Native Flatlist会多次呈现同一项

当数据更新时，react native flatlist组件呈现与数据列表相同的项的次数。这是一个聊天应用程序。当用户单击“发送”按钮时，this.state.messages将更新，并导致扁平列表重新加载。但是，当它重新渲染时，所有组件的渲染都相同

Chat.js

import React，{Component}来自'React'；
从“react native”导入{View，FlatList}；
从'react redux'导入{connect}；
从“/”导入{chatbuble，Input}；
从“../Header”导入{Header}；
类聊天扩展组件{
陈述={
信息：[]，
};
组件willmount（）{
这是我的国家({
信息：[
{
text:this.props.navigation.state.params.chat.lastMessage，
方向：'左'，
时间戳：新日期（）.getTime（），
id:'666'，
用户：{
displayName:this.props.navigation.state.params.chat.displayName，
},
}, {
短信：“谢谢你，尼克！”，
时间戳：新日期（）.getTime（），
方向：'对'，
id:'589'，
用户：{
displayName:'你'，
},
},
],
});
}
onSend=（消息）=>{
const messageData={
文本：消息，
时间戳：新日期（）.getTime（），
方向：'对'，
id:Math.random（1000）.toString（），
用户：{
displayName:'你'，
},
};
如果（消息！=''）{
这是我的国家({
messages:this.state.messages.concat（[messageData]），
});
}
setTimeout（（）=>this.list.scrollToEnd（），200）；
}
renderMessages=（{item}）=>{
返回；
}
render（）{
返回(
message.id}
renderItem={this.renderMessages}
ref={（ref）=>{this.list=ref；}}
/>
);
}
}
常量mapStateToProps=（状态）=>{
让用户；
if（state.user.user）{
user=state.user.user；
}
返回{user}；
};
导出默认连接（MapStateTops）（聊天）根据您在问题中提到的代码，问题似乎是状态在追加新的数组元素时没有保留上一个数组元素

const messages = [...this.state.messages,messageData] //

将
此.state.messages
视为包含
假定数据的数组，并将
messageData
视为数组的单个元素

this.setState({ messages:messages  });

如果作为道具
数据提供的数组包含重复的数据，则flatlist将呈现相同的数据。因此，请提供适当的数据。我正在向flatlist提供适当的数据。它仅呈现数组的最后一个索引。只需打印
this.state.messages
。您只能将最后一条消息作为数组的一部分查看。
chatbuble
是自定义组件吗？如果是自定义组件，请共享
chatbuble
的代码。顺便说一句，在
chatbuble
中尝试使用
key
属性一次。我也在上面添加了chatbuble自定义组件代码。由于flatlist有一个密钥提取器，因此无需将密钥作为道具传递给ChatBubblewhen i console.log（this.state.messages），我就可以获得适当的数据。我相信您提供的修复相当于将消息数据连接到状态。我认为平面列表只是呈现this.state.messages的最后一个索引，两者都是相同的。没有平面列表呈现您提供的整个数组。是否有任何其他原因导致只能呈现最后一个索引？您是否可以通过注释ref、keyextractor和滚动到end event来尝试创建项目。只需渲染平面列表