尝试从当前会话用户获取信息时出错。“重新渲染太多。React 限制渲染次数以防止无限循环。”

我是 React/Node 的新手，正在从事一个学习项目。这是一个将用户（自由职业者）与非营利公司联系起来的平台。当用户登录时，他们可以查看公司列表并单击按钮与该公司建立联系。然后，他们可以转到 UserConnections 页面以查看与他们有联系的所有公司。

当他们单击“连接”按钮时，将在数据库中建立连接，并且该按钮变为禁用状态。这目前工作正常......除非您刷新页面，在这种情况下按钮再次变得可点击。

为了解决这个问题，我可以访问currentUser.connections. 控制台日志记录为我提供了用户连接到的公司句柄数组。我想检查用户当前查看的公司是否在此列表中。如果是，则将connected状态更新为true。所以我添加了这段代码：

if (currentUser.connections.includes(companyHandle)) {
      setConnected(true);
    } 

添加上面的代码会产生这个错误： Unhandled Rejection (Error): Too many re-renders. React limits the number of renders to prevent an infinite loop.

如何在不触发此错误的情况下执行此操作？代码如下（缩短）：

公司详情.js

function CompanyDetail() {
  const { companyHandle } = useParams();
  const [company, setCompany] = useState(null);
  const { currentUser, hasConnectedToCompany, connectToCompany } = useContext(UserContext);
  const [connected, setConnected] = useState();


  React.useEffect(function updateConnectedStatus() {
    setConnected(hasConnectedToCompany(companyHandle));
  }, [companyHandle, hasConnectedToCompany]);


  async function handleConnect(evt) {
    if (hasConnectedToCompany(companyHandle)) return;
    connectToCompany(companyHandle);
    setConnected(true);

    let connectUserInDb;
    try {
      connectUserInDb = await VolunteerApi.connectToCompany(currentUser.username, companyHandle);
    } catch (err) {
      setFormErrors(err);
      return;
    }
  }

  if (currentUser) {
    if (currentUser.connections.includes(companyHandle)) {
      setConnected(true);
    }
    return (
      <div>
        <div>
          <h1> {company.companyName} </h1>
          <p>
            <button onClick={handleConnect} disabled={connected}> {connected ? "Connected" : "Connect"} </button>
          </p>
        </div>
      </div>
    );
  } else {
    return (
      <div>
        <div>
          <h1> {company.companyName} </h1>
          <p>
            <a href="/login-user"><button>Login to Connect</button></a>
          </p>
        </div>
      </div>
    );
  }
}