Javascript React JS组件在Meteor中多次渲染
我将Meteor 1.3与react js和Tracker react一起用于此应用程序。 我有一个页面可以查看应用程序中的所有可用用户。此页面要求用户登录以查看数据。如果用户未登录,它将显示登录表单,一旦登录,组件将呈现用户的数据 逻辑的主要组件Javascript React JS组件在Meteor中多次渲染,javascript,meteor,reactjs,es5-shim,Javascript,Meteor,Reactjs,Es5 Shim,我将Meteor 1.3与react js和Tracker react一起用于此应用程序。 我有一个页面可以查看应用程序中的所有可用用户。此页面要求用户登录以查看数据。如果用户未登录,它将显示登录表单,一旦登录,组件将呈现用户的数据 逻辑的主要组件 export default class MainLayout extends TrackerReact(React.Component) { isLogin() { return Meteor.userId() ?
export default class MainLayout extends TrackerReact(React.Component) {
isLogin() {
return Meteor.userId() ? true : false
}
render() {
if(!this.isLogin()){
return (<Login />)
}else{
return (
<div className="container">
<AllUserdata />
</div>
)
}
}
}
问题是登录时,它只显示当前用户的数据。不会渲染所有其他用户对象。如果我检查控制台,console.log('User objects'+this.allusers())代码>显示渲染3次的对象:第一次渲染仅显示当前用户的数据,第二次渲染所有用户的数据(所需结果),第三次渲染再次仅渲染当前用户的数据
如果我刷新页面,用户数据将正确呈现
知道为什么吗?React在运行时多次调用组件的render()
方法。如果遇到意外调用,通常情况下会触发对组件的更改并启动重新渲染。似乎有什么东西正在覆盖对Meteor.users.find().fetch()
的调用,这可能是因为您在每次渲染时都调用了该函数。尝试在render方法之外检查值,或者更好的是,依靠测试来确保您的组件正在执行它应该执行的操作:)
从
render()函数应该是纯函数,这意味着它不会修改组件状态,每次调用它时都返回相同的结果,并且不会读取或写入DOM,也不会与浏览器交互(例如,通过使用setTimeout)。如果需要与浏览器交互,请使用componentDidMount()或其他生命周期方法执行工作。保持render()的纯属性可以使服务器渲染更加实用,并使组件更易于思考
另见:
export default class Users extends TrackerReact(React.Component) {
constructor() {
super();
this.state ={
subscription: {
Allusers : Meteor.subscribe("AllUsers")
}
}
}
componentWillUnmount(){
this.state.subscription.Allusers.stop();
}
allusers() {
return Meteor.users.find().fetch();
}
render() {
console.log('User objects ' + this.allusers());
return (
<div className="row">
{
this.allusers().map( (user, index)=> {
return <UserSinlge key={user._id} user={user} index={index + 1}/>
})
}
</div>
)
}
};