当用户刷新页面时，React 状态丢失

Question

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

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

我可能没有正确使用 state。 我正在跟踪两个不同的状态。 第一个是用户刚刚建立的“新”连接。 第二个是当他们访问他们的 UserConnections 页面时，我正在从数据库中检索他们的“旧”连接。

如果用户刷新页面或稍后返回，我该怎么做才能确保连接状态保持不变？ 我的代码如下（缩短为仅包含相关代码）

应用程序.js

function App() {

  const [currentUser, setCurrentUser] = useState(null);
  const [connectionHandles, setConnectionHandles] = useState([]);

//   Check if connected to this company 
  function hasConnectedToCompany(companyHandle) {
    return connectionHandles.includes(companyHandle);
  }

//   Make the connection in the database
  function connectToCompany(companyHandle) {
    if (hasConnectedToCompany(companyHandle)) return;
    VolunteerApi.connectToCompany(currentUser.username, companyHandle);
    setConnectionHandles([...connectionHandles, companyHandle]);
  }

  return (
    <BrowserRouter>
      <UserContext.Provider value={{ connectionHandles, setConnectionHandles, currentUser, setCurrentUser, hasConnectedToCompany, connectToCompany }}>
        <div>
          <Navigation />
          <Routes />
        </div>
      </UserContext.Provider>
    </BrowserRouter>
  );
}

公司详情.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]);
  

//   Handle connect 
  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) {
    return (
      <div>         
            <h1>{company.companyName}</h1>            
            <p>
              <button onClick={handleConnect} disabled={connected}> {connected ? "Connected" : "Connect"} </button>              
            </p>
      </div>
    );
  } 
}

用户连接.js

function UserConnections() {
  const { currentUser, connectionHandles } = useContext(UserContext);
  const [companies, setCompanies] = useState([]);

  useEffect(() => {
    let isMounted = true;
    const connections = currentUser.connections.concat(connectionHandles);
    const comps = connections.map((c) => VolunteerApi.getCurrentCompany(c));
    Promise.all(comps).then(comps => isMounted && setCompanies(comps));
    return () => { isMounted = false };
  }, [currentUser, connectionHandles]);

  if (!companies || companies.length === 0) {
    return (
      <div>
        <div>
          <p>You have no connections</p>
        </div>
      </div>
    )
  } else {
    return (
      <div>
        <div>
          <h1>Connections</h1>
          {companies && companies.map(c => (
            <CompanyCard
              key={c.companyHandle}
              companyHandle={c.companyHandle}
              companyName={c.companyName}
            />
          ))}
        </div>
      </div>
    );
  }
};

Answer 1

页面刷新时状态将重置，但您可以使用 DB 来保存连接，也可以使用本地存储。

Answer 2

事实上，当你刷新页面时，状态会随着 React 丢失。

即使用户刷新页面，您也应该使用另一种方法来保留此信息。 以下是选项：

• 在数据库中。 如果用户支持身份验证（登录密码），则可以工作。 示例用户name: Paul , id; 3131 id; 3131 ，确实点击了“连接”按钮。 在您的数据库中，您在名为userConnect = true的表User添加一列
• 在网址中。 一旦用户单击“连接”按钮，您就可以使用React router更改 URL。 例如，URL 是mydomain.com ，点击后变为mydomain.com?clicked=true 。 如果用户刷新了您的页面，您仍然拥有有关单击该按钮的用户的信息。
• 在 cookie 中（更多信息在这里https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies ）
• 在本地存储中（更多信息在这里https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage/local ）