Question

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

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])

Answer 1

您可以执行以下操作，而不是使用.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])

将新对象推入平面列表数据数组

1 个答案: