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

我是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>
);
}
};

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

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

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

在数据库中。如果用户在身份验证(登录密码)之后，可以工作。用户name: Paul,id; 3131，点击了"连接"按钮。在数据库中，在表User中添加名为userConnect = true
url中。只要用户点击按钮"连接"。您可以使用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)

相关内容

最新更新

热门标签：