React native React Native：如何在底部呈现新消息？

我刚刚在react本机应用程序中实现了socket.io，以实现1-1私有消息传递

插座按要求正常工作，即消息正在实时发送。但我的问题是，当我尝试发送一条消息时，它会被添加到反向平面列表的顶部，而最新的消息应该显示在底部

这是我的密码：

const message = route.params.message;
const [messages, setMessages] = useState([]);
const [refreshing, setRefreshing] = useState(false);
const [text, setText] = useState('');
const [loading, setLoading] = useState(false);
const [error, setError] = useState(false);
const [socket, setSocket] = useState(null);
const { user } = useAuth();

useEffect(() => {
const newsocket =io.connect("http://192.168.1.103:9000")
setMessages(message.Messages)

newsocket.on('connect', msg => {
console.log(`user: ${user.id} has joined conversation ${message.id}`)
setSocket(newsocket)
newsocket.emit('subscribe', message.id);
});

newsocket.on("send_message", (msg) => {
console.log("this is the chat messages:", msg);
setMessages(messages => messages.concat(msg)) // I THINK PROBLEM IS HERE 
});

return(()=>newsocket.close());

}, []);

const onSend = (ConversationId,senderId,receiverId,message) => {
console.log("sent")
const to = (user.id===route.params.message.user1? 
route.params.message.user2:route.params.message.user1)
socket.emit('message', { to: to, from: user.id, message,ConversationId });
setText("")
messagesApi.sendMessage({ConversationId,senderId,receiverId,message});
};

const updateText=(text)=>{
setText(text);
}

return(
<Animated.FlatList
    inverted
    data={messages}
    keyExtractor={(item,index)=>index.toString()}
    extraData={messages} // add this    
    renderItem={({item,index})=>(
        <>
        <MessageDate_Time 
        text={moment(item.createdAt).fromNow()} 
        mine={item.senderId !== user.id}
        />
        <MessageBubble
        text={item.message}
        mine={item.senderId !== user.id}
        />
         </>
    )}
    />
)

将concat更改为unshift

因此，您使用的是反向道具，消息是反向的，这就是为什么您需要在开头添加一条新消息，然后在结尾添加一条新消息。有点混乱：

将concat更改为unshift

---

因此，您使用的是反向道具，消息是反向的，这就是为什么您需要在开头添加一条新消息，然后在结尾添加一条新消息。有点令人困惑：

您可以使用数组分解将其添加到数组的末尾或前端。使用[…messages，newMessage]或[newmessages，…messages]@rishabhana，我尝试了您建议的两种解决方案，但不幸的是，它们都不起作用。当我发送消息时，整个消息列表将消失，只显示已发送的消息。您可以使用数组分解将其添加到数组的末尾或前端。使用[…messages，newMessage]或[newmessages，…messages]@rishabhana，我尝试了您建议的两种解决方案，但不幸的是，它们都不起作用。当我发送消息时，整个消息列表消失，只显示发送的消息。嘿，Leri，希望你很好。谢谢您的回答，但当我尝试它时，我一直得到不变的冲突：TaskQueue:任务错误：尝试获取超出范围索引的帧NaN@kd12345我很好，谢谢。看我的最新消息谢谢你，你又救了我。感谢：顺便说一句，我刚刚尝试了你新编辑的解决方案，它不起作用，但前一个有效。这一个工作setMessagesmessages=>[msg，…messages]；嗨，勒里，希望你很好。我想知道你能不能看看这个问题？嘿，勒里，希望你很好。谢谢您的回答，但当我尝试它时，我一直得到不变的冲突：TaskQueue:任务错误：尝试获取超出范围索引的帧NaN@kd12345我很好，谢谢。看我的最新消息谢谢你，你又救了我。感谢：顺便说一句，我刚刚尝试了你新编辑的解决方案，它不起作用，但前一个有效。这一个工作setMessagesmessages=>[msg，…messages]；嗨，勒里，希望你很好。我想知道你能不能看看这个问题？

newsocket.on("send_message", (msg) => {
    setMessages(messages => messages.unshift(msg));
    // OR
    const newMessages = [msg, ...messages];
    setMessages(newMessages);
});