Question

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

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

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

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

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

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]);
  

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

UserConnections.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，确实点击了“连接”按钮。在您的数据库中，您在表 User 中添加一列名为 userConnect = true
在网址中。只要用户点击“连接”按钮，您就可以使用 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）

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

2 个答案: