React Native:当我发送消息时，Flatlist 不会立即更新

本文介绍了React Native:当我发送消息时，Flatlist 不会立即更新的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我刚刚在我的 React Native 和 nodejs 项目中完成了我的套接字设置，但我的平面列表仍然没有在发送消息时立即更新，我需要刷新应用程序以使其更新.

I just finishing setting up my socket in my react native and nodejs project and still my flatlist does not update instantly when a message is sent, i need to refresh the app in order for it to update.

我认为通过使用套接字这会起作用，但仍然不起作用.每当我用户打开聊天时，我就会得到例如.用户:1 已加入控制台中的对话 1，这表明套接字正在工作.

I thought that by using socket this will work but still it is not working. whenever i user opens a chat i get eg. user: 1 has joined conversation 1 in the console which indicates that the socket is working.

客户端

function ChatScreen({route,navigation}) { const message = route.params.message; const [messages, setMessages] = useState(message.Messages); const [text, setText] = useState(''); const [socket, setSocket] = useState(null); const { user } = useAuth(); const index = route.params.index; const updateView = route.params.updateView; useEffect(() => { const newsocket =io.connect(socketURL) setMessages(messages); newsocket.on('connect', msg => { console.log(`user: ${user.id} has joined conversation ${message.id}`) setMessages(messages=>messages.concat(msg)) setSocket(newsocket) }); return()=>newsocket.close; }, []); const onSend = (ConversationId,senderId,receiverId,message) => { messagesApi.sendMessage({ConversationId,senderId,receiverId,message}); setText("") 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 }); }; const updateText=(text)=>{ setText(text); } return ( <FlatList inverted data={message.Messages} keyExtractor={(message) => message.id.toString()} renderItem={({item,index})=>( <> <Text> {moment(item.createdAt).fromNow()} </Text> <MessageBubble text={item.message} mine={item.senderId !== user.id} /> </> )} /> <View style={styles.messageBoxContainer}> <TextInput onChangeText={updateText} value={text} /> <TouchableOpacity onPress={()=>{onSend(message.id,user.id,(user.id===message.user1? message.user2:message.user1),text)}}> </TouchableOpacity> </View> ); }

服务端

const express = require("express"); const app = express(); const http = require("http"); const socket = require("socket.io") const server=http.createServer(app); const io =socket(server) io.on('connection', (socket) => { console.log("connected") socket.on('message', (data) => { console.log(data) socket.join(data.ConversationId); io.sockets.in(data.to).emit('send_message', { message: data.message, to: data.to }); }); });

更新

客户端

UPDATE

Client Side

const message = route.params.message; const [messages, setMessages] = useState([]); const [text, setText] = useState(''); const [socket, setSocket] = useState(null); const { user } = useAuth(); useEffect(() => { const newsocket =io.connect("192.168.1.103:9000") newsocket.on('connect', msg => { console.log(`user: ${user.id} has joined conversation ${message.id}`) setSocket(newsocket) setMessages(message.Messages) }); newsocket.on("send_message", (msg) => { console.log("this is the chat message:", msg); setMessages([ { ...message.Messages },...messages]); }); return()=>newsocket.close; }, []); const onSend = (ConversationId,senderId,receiverId,message) => { console.log("sent") messagesApi.sendMessage({ConversationId,senderId,receiverId,message}); setText("") 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 }); }; const updateText=(text)=>{ setText(text); } <FlatList inverted data={messages} keyExtractor={(message) => message.id.toString()} renderItem={({item,index})=>( <> <Text> {moment(item.createdAt).fromNow()} </Text> <MessageBubble text={item.message} mine={item.senderId !== user.id} /> </> )} bounces={false} /> <View style={styles.messageBoxContainer}> <TextInput onChangeText={updateText} value={text} /> <TouchableOpacity onPress={()=>{ onSend( message.id, user.id, (user.id===message.user1?message.user2:message.user1), text )}} > <Text>Send</Text> </TouchableOpacity> </View>

服务端

io.on('connection', (socket) => { console.log("connected") socket.on('message', (data) => { console.log(data) socket.emit('send_message', { message: data.message, receiverId: data.to,senderId:data.from,conversationId:data.ConversationId }) }); });

使用更新后的代码，当我打开聊天时，我得到

Using the updated code, when i open a chat i get

user: 43 has joined conversation 4 ---- on client side console connected ---- on server side console

使用更新后的代码，当我发送消息时

Using the updated code, when i send a message i get

this is the chat message: Object { "conversationId": 25, "message": "You", "receiverId": 47, "senderId": 43, } --- in my client side console { to: 47, from: 43, message: 'You', ConversationId: 25 } ---- server side console

然后我得到一个错误

undefined is not an object (evaluating 'message.id.toString')

我认为我的问题是我没有正确发出消息 ID，因此我的 flatlist 不知道.要获取消息 ID，我需要先将消息存储在 db 中

I think my problem is that i am not emitting the the message id correctly and therefore my flatlist does not know it. To get a message id, i need to store the message in db first

客户端

const message = route.params.message; const [messages, setMessages] = useState([]); const [text, setText] = useState(''); const [socket, setSocket] = useState(null); const { user } = useAuth(); useEffect(() => { const newsocket =io.connect(socketURL) newsocket.on('connect', msg => { console.log(`user: ${user.id} has joined conversation ${message.id}`) setSocket(newsocket) setMessages(message.Messages) }); newsocket.on("send_message", (msg) => { console.log("this is the chat message:", msg); const data = [...messages]; console.log(data) data.push(msg); setMessages(data); }); return(()=>newsocket.close()); }, []); const onSend = (ConversationId,senderId,receiverId,message) => { console.log("sent") messagesApi.sendMessage({ConversationId,senderId,receiverId,message}); setText("") 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 }); }; const updateText=(text)=>{ setText(text); } <FlatList inverted data={messages} keyExtractor={(item,index)=>index.toString()} renderItem={({item,index})=>( <> <Text> {moment(item.createdAt).fromNow()} </Text> <MessageBubble text={item.message} mine={item.senderId !== user.id} /> </> )} bounces={false} /> <View style={styles.messageBoxContainer}> <TextInput onChangeText={updateText} value={text} /> <TouchableOpacity onPress={()=>{ onSend( message.id, user.id, (user.id===message.user1?message.user2:message.user1), text )}} > <Text>Send</Text> </TouchableOpacity> </View>

服务端

io.on('connection', (socket) => { console.log("connected") socket.on('message', (data) => { console.log(data) socket.emit('send_message', { message: data.message, receiverId: data.to,senderId:data.from,conversationId:data.ConversationId }) }); });

现在在我发送消息时使用新的更新代码，只有新消息被呈现给发件人，而没有以前的消息，而接收者在聊天时没有收到任何消息.

Now using the new updated code when i send a message only the new message gets rendered to the sender without the previous messages, and the receiver does not receive anything while on the chat.

推荐答案

试试这个方法

<FlatList inverted data={messages} keyExtractor={(item,index) => index.toString()} extraData={messages} // add this renderItem={({item,index})=>(...)} useEffect(() => { ... newsocket.on("send_message", (msg) => { console.log("this is the chat message:", msg); // setMessages([ { ...message.Messages },...messages]); // remove this // add this const data = [...messages]; data.push(msg); setMessages(data); }); ... }, []);