我对React-redux应用程序开发很新,我试图了解如何在页面加载后立即发送另一个操作。以下是我的容器代码。我正在使用这个(https://github.com/jpsierens/webpack-react-redux)样板。
let locationSearch;
const ActivationPage = ({activateUser}) => {
return (
<div className="container">
<h2>Activation Required</h2>
<p>An Activation Email was sent to your email address. Please check your inbox to find the activation link</p>
{ activateUser() }
</div>
);
};
ActivationPage.propTypes = {
activateUser: PropTypes.func
};
const mapStateToProps = (state) => {
return {
message: state.message,
currentUser: state.currentUser,
request: state.request
};
};
const mapDispatchToProps = (dispatch) => {
return {
activateUser: () => {
console.log(location);
if (location.search !== '') {
locationSearch = querystring.parse(location.search.replace('?', ''));
console.log(locationSearch);
if (locationSearch.hasOwnProperty('user_id') && locationSearch.hasOwnProperty('activation_code')) {
// change request state to pending to show loader
dispatch(actions.requestActions.requestPending());
}
}
}
};
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(ActivationPage);
此代码为我提供了警告:setState(...):在现有状态转换期间无法更新,可能是因为我在渲染功能(IDK)期间调度了一个动作。如何在页面加载后自动转换给定代码以自动触发activateUser()函数。
答案 0 :(得分:5)
https://facebook.github.io/react/docs/react-component.html
componentWillMount()
和componentDidMount()
为您服务。
我的意见 - 你应该避免使用componentWillMount
而更喜欢componentDidMount
- 如果你将使用服务器渲染,这是有意义的
答案 1 :(得分:2)
在我将组件转换为class
之后让它工作extends Component
这个答案在这里帮助了我一些概念
How do you mix componentDidMount() with react-redux connect()?
以下是那些可能会像我一样对此感到困惑的人的实施。
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import actions from '../actions';
let locationSearch;
class ActivationPage extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
this.props.activateUser();
}
render() {
return (
<div className="container">
<h2>Activation Required</h2>
<p>An Activation Email was sent to your email address. Please check your inbox to find the activation link</p>
</div>
);
}
}
ActivationPage.propTypes = {
activateUser: PropTypes.func
};
const mapStateToProps = (state) => {
return {
request: state.request
};
};
const mapDispatchToProps = (dispatch) => {
return {
activateUser: () => {
if (location.search !== '') {
locationSearch = querystring.parse(location.search.replace('?', ''));
if (locationSearch.hasOwnProperty('user_id') && locationSearch.hasOwnProperty('activation_code')) {
// change request state to pending to show loader
dispatch(actions.requestActions.requestPending());
}
}
}
};
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(ActivationPage);