我有一些组件需要知道用户是否使用 Facebook 登录，所以我使用函数 mapStateToProps 将 redux 状态映射到组件 props .
同时，一些组件可以自己登录用户，所以他们需要本地 state 来知道用户是否登录(我不能更新组件内部的组件属性本身)。
当用户登录时，他们会发送一个 loggedIn 事件。
这是最佳做法还是我做错了什么？ 我有这样的组件:
import ...
const FBSDK = require('react-native-fbsdk');
const {
LoginButton,
AccessToken,
LoginManager
} = FBSDK;
class Settings extends Component {
constructor(props) {
super(props);
this.state = {
isLoggedIn: false,
};
}
componentDidMount () {
this._loadInitialState();
}
async _loadInitialState() {
AccessToken.getCurrentAccessToken().then(
(data) => {
if (data) {
this.setState({
isLoggedIn: true,
});
// Dispatch loggedIn action
this.props.loggedIn();
}
}
);
}
render() {
const {navigate} = this.props.navigation;
return (
<Content>
<List style={styles.list}>
{this.state.isLoggedIn &&
<ListItem>
<Body>
...
</Body>
</ListItem>
}
<ListItem style={styles.listItem}>
<LoginButton
readPermissions={["user_friends", "email"]}
onLoginFinished={
(error, result) => {
if (error) {
alert("login has error: " + result.error);
} else if (result.isCancelled) {
alert("login is cancelled.");
} else {
AccessToken.getCurrentAccessToken().then(
(data) => { this.setState({isLoggedIn: true});
// Dispatch loggedIn action
this.props.loggedIn();
}
).catch(function(e) {
log(e); // "oh, no!"
});
}
}
}
onLogoutFinished={() => {
this.setState({isLoggedIn: false});
// Dispatch loggedOut action
this.props.loggedOut();
}} />
</ListItem>
</List>
</Content>
)
}
}
Settings.propTypes = {
isLoggedIn: PropTypes.bool.isRequired,
}
const mapStateToProps = (state) => {
return {
isLoggedIn: state.isLoggedIn,
};
};
const mapDispatchToProps = (dispatch) => ({
startup: () => dispatch(StartupActions.startup()),
loggedIn: () => dispatch({
type: LOGGED_IN
}),
loggedOut: () => dispatch({
type: LOGGED_OUT
})
});
export default connect(mapStateToProps, mapDispatchToProps, null, {pure: false})(Settings);
如您所见，该组件确实具有 isLoggedIn 本地状态和 isLoggedIn 属性，我需要同时更新两者。
我问的是实践以外的原因，当我使用 Facebook 登录用户时出现此错误(我没有寻找位置，但似乎某处 props未定义):
TypeError: Cannot read property 'loggedIn' of undefined
而且我不知道它发生的位置和原因，以及它是否取决于此代码。
最佳答案
您需要绑定(bind)您的方法以在 _loadInitialState 方法中访问 this。
最简单的方法是使用箭头函数作为
_loadInitialState = async() => {
一旦 setState 完成更新，也会在其回调方法中调度操作
this.setState({
isLoggedIn: true,
}, () => this.props.loggedIn());
onLogoutFinished={() => {
this.setState({isLoggedIn: false}, () => this.props.loggedOut());
}}
关于javascript - 在组件状态和 props 中使用相同的变量名和 redux，我得到未定义的 props 错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52395781/