时间戳

首页 > 解决方案 > 将新对象推送到平面列表数据数组中

javascript - 将新对象推送到平面列表数据数组中

问题描述

我正在尝试制作一个聊天应用程序，我有一个 flatlist，我的 flatlist 数据来自 api，我将把我的新消息推送到这个 flatlist 并用新数据显示我的组件。但问题是我的列表数据没有改变，也没有显示我的新消息，有没有人可以帮助我？

useEffect(() => {
    chatHistoryData()
}, [])

let chatHistoryData = async () => {
    try {
        setLoading(true);
        setError(false);

        let res = await axios.get(`https://call.darmankade.com/report/${reserveHash}`);
        if (res && res.data) {
            let filterChatData = res.data.filter((x: any) => x.type != 4);
            console.log("chat data: ", filterChatData)
            setChatData(filterChatData);
            setLoading(false);
            setError(false);
        }
    } catch (error) {
        console.log('loading consult history failed: ', error);
        setLoading(false);
        setError(true);
    }
}

我的平面列表和文本输入组件

<FlatList
   ref={chatList}
   data={chatData}
   keyExtractor={(item: any) => item.index}
   onContentSizeChange={() => chatList.current.scrollToEnd()}
   ListFooterComponent={() => { return <View style={{ height: verticalScale(20) }} /> }}
       renderItem={(data: any) => {
                  return <MessageBody
                                patientSide={data.item.side == consultSides.Patient}
                                doctorSide={data.item.side == consultSides.Doctor}
                                textMsg={data.item.type == 1}
                                hasImage={data.item.type == 3}
                                hasVoice={data.item.type == 2}
                                content={data.item.content}
                                messageTime={data.item.date.slice(11, 16)}
                            />
                        }}
                    />

<MessageInput
   inputValue={messageTxt}
   inputOnchangeText={setMessageTxt}
   startRecording={sendMessage}
 />

我的发送按钮

let sendMessage = useCallback(() => {
    let newChatData = [...chatData]
    newChatData.push({
        connectionId: "9f5dssd_qGJUYhHMDRnm05g5yw",
        content: "salam niloo",
        date: "2020-10-31T12:55:03.076",
        side: consultSides.Doctor,
        type: consultMessages.text,
        userAgent: null
    })

    setChatData(newChatData)

}, [messageTxt])

标签： javascriptreact-nativepush

解决方案

而不是使用.push您可以执行以下操作，

let sendMessage = useCallback(() => {
let newChatData = [...chatData, {
        connectionId: "9f5dssd_qGJUYhHMDRnm05g5yw",
        content: "salam niloo",
        date: "2020-10-31T12:55:03.076",
        side: consultSides.Doctor,
        type: consultMessages.text,
        userAgent: null
    }];

    setChatData(newChatData)

}, [messageTxt])

推荐阅读