在useEffect中反應設定狀態，然后嘗試在該狀態中找到一些東西

我正在嘗試創建一個應用內聊天，但我一直在 javascript 中遇到同樣的問題。在我的 useEffect 中，我對后端進行 api 呼叫以獲取包含所有訊息的所有對話并將其設定為我的記錄狀態。同樣在我的 useEffect 中，我有一個套接字偵聽器，它偵聽在聊天中發送的訊息，并希望將最后一條訊息預覽更新為新訊息。

我的問題是當我第一次加載網路應用程式并嘗試發送我不斷收到的訊息時

TypeError: Cannot read properties of undefined (reading 'Messages')

這是我的代碼：

useEffect(()=> {
            axios
            .get('/api/messages/',{headers:{"auth-token":localStorage.getItem('jwtToken')}})
                .then(res => {
                    setRecords(res.data)
                })
                .catch(err =>
                    console.log(err)      
                )

    // main socket       
    const newsocket =io.connect(CONNECTION_PORT)

      newsocket.on('connect', msg => {
          setSocket(newsocket)
          console.log(`Admin ${ADMIN.id} is waiting. socketID: ${newsocket.id}`)
       });

        newsocket.emit('waiting', ADMIN.id);

        newsocket.on("socketListening", (msg) => {
            console.log(msg)
        
            try{
                    const result = records.find(e=>e.id===msg.conversationId) //Error occurs here
                    console.log(result)
                    const resultMessages=result.Messages;      
                    const newMessages =[msg,...resultMessages]
                    result.Messages=newMessages;
                    result.lastMessage=msg.message;
                    if(msg.senderId!==ADMIN.id){
                        result.Recipient=false;
                      }else{
                        result.Recipient=true;

                      }
                    console.log(result);
                    const arraywithoutrecord = records.filter(e=>e.id!==msg.conversationId)
                    setRecords([result,...arraywithoutrecord])
            }catch(e){
                console.log(e)
            }
        })

       return(()=>newsocket.close());

    },[]);

uj5u.com熱心網友回復：

似乎創建一個訂閱您的“記錄”狀態的 useEffect 就可以完成這項作業。

在 react 中設定狀態可以看作是一個異步函式，因此為什么會出現未定義的錯誤

import { useEffect, useState } from 'react';
import axios from 'axios';

const Component = () => {

  const [records, setRecords] = useState(null);
  const [socket, setSocket] = useState(null);

  const CONNECTION_PORT = 1234;

  let myMsg;
  const newsocket = io.connect(CONNECTION_PORT);

  // First useEffect (called on init) :
  useEffect(() => {
    axios
      .get('/api/messages/', { headers: { 'auth-token': localStorage.getItem('jwtToken') } })
      .then(res => {
        setRecords(res.data);
      })
      .catch(err =>
        console.log(err)
      );

    // main socket
    

    newsocket.on('connect', msg => {

      // Set to component variable
      myMsg = msg;

      setSocket(newsocket);
      console.log(`Admin ${ADMIN.id} is waiting. socketID: ${newsocket.id}`);
    });

    newsocket.emit('waiting', ADMIN.id);

    newsocket.on('socketListening', (msg) => {
      console.log(msg);
    }, []);

    // Second useEffect (called every time "records" state is updated):

    useEffect(() => {


      try {

        const result = records.find(e => e.id === myMsg['conversationId']); //Error occurs here
        console.log(result);
        const resultMessages = result.Messages;
        const newMessages = [myMsg, ...resultMessages];
        result.Messages = newMessages;
        result.lastMessage = myMsg.message;

        if (myMsg['senderId'] !== ADMIN.id) {
          result.Recipient = false;
        } else {
          result.Recipient = true;
        }

        const arraywithoutrecord = records.filter(e => e.id !== myMsg['conversationId']);
        setRecords([result, ...arraywithoutrecord]);
      } catch (e) {
        console.error(e);
      }
    });

    return (() => newsocket.close());

  }, [records]);


  return (
    <></>
  );

};

uj5u.com熱心網友回復：

記錄不包含您要查找的訊息。可能是因為尚未加載資料。

嘗試設定日志并檢查：首先執行的是什么：thenLog 或 socketListeningLog？

.then(res => {
    console.log("getting is done");
    setRecords(res.data)
})

標籤：javascript反应插座

上一篇：了解Python中的檔案描述是如何作業的

下一篇：如何解決關閉（）函式中的“SHUT_RDWR未宣告錯誤”以關閉偵聽套接字？