reactjs - 为什么我在使用 websocket 时在 useEffect 中有无限循环？

Question

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

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

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