將新對象推入 flatlist 數據數組

Question

我正在嘗試制作一個聊天應用程序，我有一個 flatlist，我的 flatlist 數據來自 apis，我要將我的新消息推送到這個 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 和 textinput 組件

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