为什么在使用websocket时useEffect中存在infity循环?

时间:2019-08-27 10:14:03

标签: reactjs websocket use-effect

我现在将weboscket添加到应用程序中,当添加新用户时,我必须尝试更新活动用户的数组,但是当我在结果参数[activeUsersInGallery]中放入useEffect时,然后向webosocket发出请求。我现在不为什么。

function Seller() {
const [activeUsersInGallery, setActiveUsersInGallery] = useState([]);
  const [checkMultipleClient, setCheckMultipleClient] = useState([]);

  function goToCheckCustomer(idClient) {
      setCheckMultipleClient([...checkMultipleClient, idClient]);
  }

  async function connectionToWebSocketRooms() {
      let response = await getConnection();
      return response
  }

  async function getActiveUsers(pageNumber) {
      let response = await connectionToWebSocketRooms();
      let data = await response
          .invoke("GetActiveUsers", pageNumber);
      await response
          .on("updateActiveUsers", (user, operationType) => updateActiveUsers(user, operationType))
          setActiveUsersInGallery(data);
          console.log(data)
      return data;
  }

  function updateActiveUsers(user, operationType) {
    console.log(user)
      if ( operationType === 'update' || operationType === 'add') {
          setActiveUsersInGallery([...activeUsersInGallery, user])
          return activeUsersInGallery
      } else if (operationType === 'remove'){
          const removeClientOnArray = [...activeUsersInGallery.filter(filterArrWhenRemoveUser => filterArrWhenRemoveUser.id !== user.id)];
          setActiveUsersInGallery(removeClientOnArray);
      }
  }

  useEffect(() => {
      getActiveUsers(1);  
  }, [activeUsersInGallery]);
return (
//...some code
) 
}

1 个答案:

答案 0 :(得分:1)

useEffect每当activeUsersInGallery更改引用时触发。在您的情况下,问题就在这里

  async function getActiveUsers(pageNumber) {
      let response = await connectionToWebSocketRooms();
      let data = await response
          .invoke("GetActiveUsers", pageNumber);
      await response
          .on("updateActiveUsers", (user, operationType) => updateActiveUsers(user, operationType))
          setActiveUsersInGallery(data);
          console.log(data)
      return data;
  }

根据此代码await response.invoke("GetActiveUsers", pageNumber)的响应创建一个新的对象引用