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

Question

我刚刚在我的 react native 和 nodejs 项目中设置了我的套接字，但我的平面列表在发送消息时仍然没有立即更新，我需要刷新应用程序才能更新。

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

客户端

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

更新

客户端

  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("http://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 })
});
});

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

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

使用更新的代码，当我发送消息时，我得到了

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，因此我的平面列表不知道它。要获取消息 ID，我需要先将消息存储在 db 中

新更新

客户端

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

现在在我发送消息时使用新的更新代码，只有新消息会呈现给发送者，而没有先前的消息，并且接收者在聊天时不会收到任何内容。

Answer 1

因此，从您的回答中，我得到的印象是，为了使其正常工作，您需要大致执行以下操作：

1. 在您的客户端，您必须有一个侦听更新的套接字：

socket.on('send_message', (e) => doSomethingWith(e));

1. 一旦您的套接字监听更新，您就可以处理收到的信息。确保组件重新呈现并显示正确信息的最简单方法是使用状态。因此，在从套接字接收到消息后，您可以设置消息

setMessages(socketMessage)

1. 然后您将messages 状态传递给您在Flatlist 中的data。我也会在 Flatlist 的 extraData 字段 also 中传递它。 如果你有 redux，你可能想把消息保存在那里，那么就不需要在组件中设置本地状态，你可以从 props 中获取它。

希望这会有所帮助，如果您有任何其他问题，请随时提出。

编辑 1：

我只是从你上面提到的解决方案中复制代码：

useEffect(() => {
    handleGetGroupMessage();
    let socket = io(socketUrl);
    socket.on("GroupChat", (msg) => {
      console.log("this is the chat messages", chatMessages);
      setChatMessages(chatMessages.concat(msg)); // this is the "doSomethingWith(e)"
    });
  }, []);

您通过套接字接收消息，然后必须对其进行处理。不使用redux？将其设置为本地状态或顶级上下文，无论适用于您的应用。

编辑 2： socket.on('connect', ...) 是一个标准的event，socket 可以理解。这不是你的信息，你需要把它分开。

Answer 2

试试这个方法

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

  ...
  }, []);