Question

我正在开发React + Meteor应用程序，但我在使用用户登录功能时遇到了问题。

我有一个标题导航栏，根据用户是否登录显示不同的组件。

像这样：

export default class Header extends Component {
    constructor(props) {
        super(props)

        this.state = {
            user: Meteor.user()
        }
    }

    render() {
        return (
            <header className="main-header">
                <nav className="navbar navbar-static-top">
                    <div className="navbar-custom-menu">
                        {this.state.user() !== null ? <LoggedInNavigation /> : <LoggedOutNavigation />}
                    </div>
                </nav>
            </header>
        )
    }
}

现在这样可行，但在用户登录时不会改变。我必须刷新页面才能更改视图（这显然不太理想）。

这是我的登录代码：

Meteor.loginWithPassword(this.state.email, this.state.password, (error) => {
    if (error)
        this.setState({ meteorError: "Error: " + error.reason })
    else {
        this.setState({ meteorError: "" })
        // Handle successful login
    }
})

问题是这两个代码块位于不同的组件中。

第一个块位于imports/ui/components/main-layout/Header，第二个块位于imports/ui/components/authentication/Login。

正如我所说，问题是用户可以登录但视图不会根据身份验证状态而改变。解决这个问题的最佳做法是什么？

修改

以下是组件的层次结构：

1 - LoggedOutNav

MainLayout -> Header -> LoggedOutNav

2 - 登录代码

MainLayout -> Routes -> (Route path="/login" component={Login}) -> LoginForm

Answer 1

这里的问题是，只要组件已挂载，类的构造函数将只运行一次而不会再运行一次。因此即使>>> l = ['11100', '11010', '11001', '10110', '10101', '10011', '01110', '01101', '01011', '00111'] >>> new_list = [[int(i) for i in j] for j in l] >>> print(new_list) [[1, 1, 1, 0, 0], [1, 1, 0, 1, 0], [1, 1, 0, 0, 1], [1, 0, 1, 1, 0], [1, 0, 1, 0, 1], [1, 0, 0, 1, 1], [0, 1, 1, 1, 0], [0, 1, 1, 0, 1], [0, 1, 0, 1, 1], [0, 0, 1, 1, 1]]会发生变化，您的Meteor.user()也不会发生变化。当a）state更改或b）您的props更改时，该组件将会重新呈现当你致电state时。我们可以利用a）通过流星setState HOC（react-meteor-data）来包装你的createContainer类，并为它设置一个被动数据上下文。当数据发生变化时，Header的道具会发生变化，组件会重新渲染。代码类似于：

Header

当Meteor用户登录时，React不会更改为LoggedInView

1 个答案: