Question

我正在REACT中创建登录表单。对照数据库记录检查电子邮件/密码，如果登录成功，我想存储会话并在标题中显示指向其他组件的链接。我可以使用它，但是每次登录/注销后，我都需要手动刷新浏览器以显示额外的链接。谁能指出我做错了什么？

Login.js

 fetch('http://localhost:5000/getUsers')
            .then((data) => data.json())
            .then((data) => {
                // console.log(data);
                return data.filter(user => (user.EMAIL === email && user.PASSWORD === password));
            })
            .then((data) => {
                if (data.length === 1) {
                    localStorage.setItem('user', data[0].EMAIL);
                    localStorage.setItem('isLoggedIn',true);
                    this.setState({email:data[0].EMAIL, password: data[0].PASSWORD, isLoggedIn: true })

在我的路线中

const routing = (
  <Router>
    <div>
        <Header name={localStorage.getItem("user")}  />

在页眉组件中

this.state = {
            name : this.props.name
        }

{(this.state.name !== "") ?
                    <li> <a href="/updateLiveGames">Update Live Games</a></li>
                    :
                    ""
                }

这可行，但是我需要刷新浏览器（F5）。

感谢您的帮助。

我希望仅当用户登录时才能登录用户并在标题中显示额外的链接。

Answer 1

在页眉组件中不要设置状态，使用props.name像这样：

{(this.props.name !== "")
  ? <li> <a href="/updateLiveGames">Update Live Games</a></li>
  : ""
}

在标头组件中初始化this.state时，将仅在组件构造时将其设置一次。这就是为什么您应该使用this.props，它会在每次组件更新时刷新。

在路由中，当您使用localStorage.getItem（“ user”）时，它不会强制刷新，因为它既不是state也不是props属性，因此不会刷新组件。

由于您不使用Redux，因此应将回调作为prop从Login.js传递到路由：

.then((data) => {
  if (data.length === 1) {
  localStorage.setItem('user', data[0].EMAIL);
  localStorage.setItem('isLoggedIn',true);
  this.props.setLoginData(data[0].EMAIL)

在路由中，您应该得到它：

<Login setLoginData={this.setLoginData} />

setLoginData = (name) => {
  this.setState({name});
}

并将this.state.name传递给Header组件：

<Header name={this.state.name}  />

登录[REACT]

1 个答案: