开发者问题收集

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

2021-01-18
290

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

这是新的 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 不是评估 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 对象添加到特定对话之前检查它。

2个回答

尝试创建 keyExtractor ,例如

keyExtractor={(item, index) => index.toString()}
Nooruddin Lakhani
2021-01-18

您已有一个变量 listing ,并且它与 keyExtractor 发生冲突。

按如下方式更改它

keyExtractor={(item) => item.id.toString()}
Nilesh Patel
2021-01-18