我创建了一个Meteor createContainer
来包装整个应用以查找Meteor.users()
:
import { Meteor } from 'meteor/meteor';
import { createContainer } from 'meteor/react-meteor-data';
import App from './../App.js';
export default AccountContainer = createContainer(() => {
const _id = Meteor.userId();
const accountHandle = Meteor.subscribe('userData', _id);
const loading = !accountHandle.ready();
const user = Meteor.users.findOne(_id);
const userExist = !loading && !!user;
return {
loading,
userExist,
user
};
}, App);
我需要在App周围使用这些数据来显示/隐藏元素并控制用户私人页面,如控制面板。
我使用Redux来存储来自createContainer
的数据,实际上我在App.js
文件中执行此操作:
// a few imports here...
class App extends Component {
render() {
const { loading, userExist, user } = this.props;
this.props.updateUser({ loading, userExist, user });
return (
<Router history={history}>
<div className="app">
<Header />
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/login" component={Login} />
<Route exact path="/signup" component={Signup} />
<Route exact path="/account" component={Account} />
<Route exact path="/account/pictures" component={Pictures} />
</Switch>
<Newsletter />
<Footer />
</div>
</Router>
);
}
};
export default connect(null, { updateUser })(App);
正如您在此处所见,我致电this.props.updateUser({ loading, userExist, user });
并更新我的redux商店。
问题是我收到以下错误:
警告:setState(...):在现有状态期间无法更新 过渡(例如在
render
或其他组件内 构造函数)。渲染方法应该是道具的纯函数 州;构造函数的副作用是反模式,但可以移动 到componentWillMount
。
这是因为我在render()
App方法中更新了Redux状态。
我尝试将其包装在setTimeout
:
setTimeout(() => {
this.props.updateUser({ loading, userExist, user });
});
这解决了我的问题,但我认为这不是解决问题的最佳解决方案。
我对使用Meteor createContainer
更新Redux状态的方式和时间感到困惑。
我希望实现的目标是能够共享应用该信息的应用程序周围的{ loading, userExist, user }
数据,即在Account.js
中:
const mapStateToProps = (state) => {
return state.user;
}
export default connect(mapStateToProps)(Account);
感谢。
修改:
刚刚将Redux更新frm render()
移至componentDidMount()
方法。
它不再显示错误,它在App.js
中更新得很好,但在Account.js
我没有更新它,看起来好像错过了它: