如何将状态从一个反应组件传递到另一个组件？

Question

我是ReactJS的新手，这就是为什么我在这里。 我创建了一个组件“登录”，并在this.state中具有变量“ isAuthenticated”。

用户登录后，我将此变量的值更改为true，然后我的应用将用户重定向到主页。

在主页中，我必须检查'isAuthenticated'的值，然后重新呈现组件。

但是它不起作用。我收到错误消息：“无法获取未定义或空引用的属性'setState'。

请帮助我解决所有问题。

Answer 1

如果您不使用Redux之类的状态管理工具，建议您使用浏览器的localStorage来存储isAuthenitcated的值。像

localStorage.setItem('isAuthenticated', true); - on login

然后在其他组件中可以使用：

localStorage.getItem('isAuthenticated'); - to figure out what you want to show

还记得在注销时将isAuthenticated设置为false！

localStorage.setItem('isAuthenticated', false); - on logout

Answer 2

我希望您将拥有如下所示的登录功能

function login(){
   doLogin().then(function(data){
     this.setState({isAuthentcated: true});
  });
}

使用这样的ES6 Arrow函数将登录功能绑定到组件上

login = () => {
       doLogin().then((data) => {
         this.setState({isAuthentcated: true});
      });
    }