Question 171281 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Can I change state in an async func called repeatedly?

Hello I am trying to create a web conference room with webrtc and webSocket that can be used by any number of users. For this, whenever a new user wants to join, messages are transmitted that contain an offer or answer.

As an example, if the 3rd user wants to connect to the others, he will receive two createoffer messages. For each createoffer the user should be stored in the state. This means that the list repeatedly gets one more user. However, only 1 user is added in the state instead of 2.
I use state instead of reference because I want the application re-render when a new user is added.

How can I solve it ?

That is the important code

  const [connectionList, setConnectionList] = useState([]);

 webSocket.current.onmessage = function (e) {

    let msgDispatcher = JSON.parse(e.data);
    console.log("msgDispatcher", msgDispatcher);

    if (msgDispatcher.pcCommand == "broadcast") {
      console.log("prepare Connection");

      let pc = new PeerConnection();
      pc.getMedia();
      setConnectionList([...connectionList, {
        fromUserID: msgDispatcher.fromUserID,
        connection: pc,
        id: uuid()
      }]);

      webSocket.current.send(JSON.stringify({
        sendType: "toUser",
        toUserID: msgDispatcher.fromUserID,
        fromUserID: userID,
        pcCommand: "createOffer"
      }));

    }

    if (msgDispatcher.pcCommand == "createOffer") {
      console.log("createOffer");
      let pc = new PeerConnection();

      pc.getMedia().then((e) => {
    
        pc.createOffer(webSocket.current, userID, msgDispatcher.fromUserID);
        
        //here is the problem
        setConnectionList([...connectionList, {
          fromUserID: msgDispatcher.fromUserID,
          connection: pc,
          id: uuid()
        }])
      })
  }

I can’t set a local list to save the users first and then set them to the new state. Setting a second list as reference is not a solution either, I think, because the list is redundant. I have no approach how to solve the problem.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I have found a solution for me, but do not know if there is a better solution.

    You just have to define a stacklist outside the function that stores the users. At the end this stack is put into the state and with that it should work.

    If the state is changed, then the stack is empty again and resets itself with it.

    Here is the code

      let stackConnection = [];
 const [connectionList, setConnectionList] = useState([]);
.
.
.

    if (msgDispatcher.pcCommand == "createOffer") {
      console.log("createOffer");
      let pc = new PeerConnection();

      pc.getMedia().then((e) => {
        msgDispatcher.fromUserID);
        pc.createOffer(webSocket.current, userID, msgDispatcher.fromUserID);

        stackConnection.push({
          fromUserID: msgDispatcher.fromUserID,
          connection: pc,
          id: uuid()
        });
      }).then((e) => {
        console.log("test");
        setConnectionList(...connectionList, stackConnection)
      })
    }

  2. 0

    There is a better solution. You can use the internal state before the state was updated and change it further. So instead of creating a variable you can work with the internal state.

    Instead

    stackConnection.push({
          fromUserID: msgDispatcher.fromUserID,
          connection: pc,
          id: uuid()
        });
      }).then((e) => {
        console.log("test");
        setConnectionList(...connectionList, stackConnection)
      })

    do

            setConnectionList((prev) => ([...prev, {
          fromUserID: msgDispatcher.fromUserID,
          connection: pc,
          id: uuid()
        }]));

    So local variable stackConnection doesn’t need anymore

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search