时间戳

首页 > 解决方案 > 尝试从当前会话用户获取信息时出错。“重新渲染太多。React 限制了渲染的数量以防止无限循环。”

javascript - 尝试从当前会话用户获取信息时出错。“重新渲染太多。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.

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

CompanyDetail.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>
    );
  }
}

标签： javascriptreactjs

解决方案

它触发太多重新渲染的原因是因为您在渲染范围内调用了 setter 状态函数；更新 useState 变量会导致重新渲染。

逻辑：

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

应该进入一个useEffect：

useEffect(() > {
   if (currentUser.connections.includes(companyHandle)) {
      setConnected(true);
    }
}, [currentUserConnectionHash, companyHandle]);

通过这样做，效果（和相关的 setState）将仅在发生变化时被companyHandle调用currentUser.connections。

推荐阅读