Question

成功实现套接字后，我现在可以从一个屏幕到另一个屏幕收听我的事件。我现在的问题是我想在我的平面列表中显示我获得的新对象。

这是新的 msg 对象：

messages: Object { "conversationId": 33, "message": "Heyy", "receiverId": 43, "senderId": 53, }

这是我的代码：

const [listings, setListings] = useState([]);

const loadListings = async () => {
setLoading(true);
const response = await messagesApi.getMessages();
setLoading(false);
if(refreshing) setRefreshing(false);
if (!response.ok) return setError(true);
setError(false);
setListings(response.data)
};

useEffect(() => {
const newsocket = sockets(user.id);
setSocket(newsocket);
newsocket.on("send_message", (msg) => {
  console.log("messages:", msg);
  setListings(listings => [...listings,msg]);
});
loadListings()
}, []);

return (
<FlatList
    data={listings}
    keyExtractor={(listing) => listing.id.toString()}
    renderItem={({ item,index }) => (
      <MessagesList
      title={item.Listing.title}
        subTitle={item.Messages[0].message}
        imageUrl={item.images[0].url}
        thumbnailUrl={item.images[0].thumbnailUrl}
        // onPress={() => console.log("message selected", item)}
        onPress={() => navigation.navigate(routes.CHAT, 
                 {message:item,index,updateView,newsocket:socket})}
      />
    )}
  />
)

当我运行此代码时，我不断收到 TypeError: undefined is not an object evaluating listing.id.toString。

我想我收到了这个错误，因为这个新的消息对象想要在没有为数据库获取它的情况下实时呈现，因此它仍然没有被赋予一个 id。

我该如何解决这个问题？

其他信息

console.log(listings[0]) 打印这个

Object{ 
        "id":33,
       "Listing":{    
                  "title": "test",
                 },
       "Messages":Array[
                  Object {
                          "conversationId": 33,
                          "id": 601,
                          "message": "Hey",
                          },
                   Object {
                          "conversationId": 33,
                          "id": 600,
                          "message": "Hey",
                          },
                        ],
        "images":Array[
                 Object {"url":"","thumbnailUrl":""}]
      }

console.log(listings.map(x=>x.Messages))

 Array[
       Array[
                  Object {
                          "conversationId": 33,
                          "id": 601,
                          "message": "Hey",
                          },
                   Object {
                          "conversationId": 33,
                          "id": 600,
                          "message": "Hey",
                          },
            ],
      Array[
                  Object {
                          "conversationId": 1,
                          "id": 2,
                          "message": "Hey",
                          },
                   Object {
                          "conversationId": 1,
                          "id": 1,
                          "message": "Hey",
                          },
             ],
         ],

我也试过这个

 useEffect(()=>{
 const x =listings.map(x=>x.id)
 console.log(x)
 },[listings])

这会打印出以下内容：

Array [
32,
33,
29,
15,
27,
25,
26,
4,
17,
]

我现在需要在将我的 msg 对象添加到它之前检查特定的对话。

Answer 1

试着让你keyExtractor喜欢

keyExtractor={(item, index) => index.toString()}

Answer 2

您已经有一个变量 listing 并且它在 keyExtractor 处发生冲突。

改成这样

keyExtractor={(item) => item.id.toString()}

React Native：在数组中插入新对象

2 个答案: