Javascript 在组件状态中使用相同的变量名，并使用redux和props，我得到了未定义props的错误_Javascript_React Native_React Redux_React Props

Javascript 在组件状态中使用相同的变量名，并使用redux和props，我得到了未定义props的错误

javascript react-native

Javascript 在组件状态中使用相同的变量名，并使用redux和props，我得到了未定义props的错误,javascript,react-native,react-redux,react-props,Javascript,React Native,React Redux,React Props,我有一些组件需要知道用户是否使用Facebook登录，因此我使用函数MapStateTrops将redux状态映射到组件道具。同时，一些组件可以自己登录用户，因此他们需要本地状态，以了解用户是否已登录（我无法更新组件内部的组件道具）当用户登录时，他们会发送一个loggedIn事件这是最佳实践还是我做错了什么？我有这样的组件： import ... const FBSDK = require('react-native-fbsdk'); const { LoginButton,

我有一些组件需要知道用户是否使用Facebook登录，因此我使用函数

MapStateTrops

将redux状态映射到组件道具。
同时，一些组件可以自己登录用户，因此他们需要本地

状态

，以了解用户是否已登录（我无法更新组件内部的组件道具）

当用户登录时，他们会发送一个

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);

我不知道它发生在哪里，为什么发生，以及它是否依赖于此代码。

您需要绑定您的方法以访问

\u loadInitialState

方法中的

此

最简单的方法是使用箭头函数作为

_loadInitialState = async() => {
当
设置状态
在其回调方法中完成更新后，也会分派操作

this.setState({ isLoggedIn: true, }, () => this.props.loggedIn()); onLogoutFinished={() => { this.setState({isLoggedIn: false}, () => this.props.loggedOut()); }}

我得到了相同的错误，我不知道如何找出错误发生的地方。在state和prop中使用相同的变量是最佳做法吗？如果您已经在使用它，最好在redux中管理该变量，不使用state直接链接，如果我可以更改组件内的值呢？通过调度相关操作更改存储中的值，无需更改组件中的值
this.setState({ isLoggedIn: true, }, () => this.props.loggedIn()); onLogoutFinished={() => { this.setState({isLoggedIn: false}, () => this.props.loggedOut()); }}