React Native / Redux - setState - 在现有状态转换期间无法更新

Question

我正在使用React Native和Redux构建应用程序，并且在实现过程中遇到了问题。我收到一条错误消息

  

setState在现有状态转换期间无法更新（例如   在渲染或其他组件的构造函数中。）

当我加载应用程序模拟器时，它似乎在任何用户输入之前立即触发handleLogin（）（并在循环中）。

以下是AuthenticationContainer和AuthenticationPage代码：

AuthenticationContainer.js：

'use strict'

import React, { Component, PropTypes } from 'react';
import AuthenticatePage from '../../components/Authenticate/AuthenticatePage'
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux'
import * as sessionActionCreators from '../../redux/session';
import {Actions, ActionConst} from 'react-native-router-flux'

class AuthenticateContainer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            email: '',
            password: ''
        };
    }

    handleLogin() {
        this.props.doLogin(this.state.email, this.state.password)
            .then(() => Actions.tabbar())
    }

    render() {
        return (
            <AuthenticatePage
                doLogin = {this.handleLogin.bind(this)}
                error = {this.props.error}/>
        );
    }
}

AuthenticateContainer.propTypes = {
    doLogin: PropTypes.func.isRequired,
    email: PropTypes.string,
    password: PropTypes.string,
    error: PropTypes.string.isRequired
};

export default connect(
    (state) => ({isFetching: state.session.isFetching, error: state.session.error}),
    (dispatch) => bindActionCreators(sessionActionCreators, dispatch)
)(AuthenticateContainer)

AuthenticationPage.js

'use strict'

import React, { Component, PropTypes } from 'react';
import {Text, View, TouchableHighlight, AlertIOS} from 'react-native';
import t from 'tcomb-form-native'
import _ from 'lodash'
import EStyleSheet from 'react-native-extended-stylesheet'
import ViewContainer from '../ViewContainer'

// AuthenticatePage.propTypes = {
//     doLogin: PropTypes.func.isRequired,
//     onUpdateForm: PropTypes.func.isRequired,
//     email: PropTypes.string,
//     password: PropTypes.string,
//     error: PropTypes.string.isRequired
// };

var Form = t.form.Form;

var User = t.struct({email: t.String, password: t.String});

const options = {
    auto: 'placeholders',
    fields: {
        email: {
            autoCapitalize: 'none',
            autoCorrect: false
        },

        password: {
            autoCapitalize: 'none',
            autoCorrect: false,
            password: true,
            secureTextEntry: true
        }
    }
};

export default class AuthenticatePage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            value: {
                email: '',
                password: ''
            }
        };
    }

    render() {
        return (
            <ViewContainer>
                <View>
                    <Form
                        ref="form"
                        type={User}
                        options={options}
                        value={this.state.value}/>
                </View>
                <View>
                    <TouchableHighlight
                        onClick={this.props.doLogin()}
                        underlayColor='#99d9f4'>
                            <Text>{_.capitalize('Login')}</Text>
                    </TouchableHighlight>
                </View>
            </ViewContainer>
        )
    }
}

因此handleLogin（）函数似乎会在页面加载时立即触发，并在抛出错误时反复运行。这是我从模拟器收到的错误。

非常感谢任何帮助！

Answer 1

我认为问题在于：

onClick={this.props.doLogin()}

你在render上调用一个函数，但你应该把它作为道具传递。要么尝试

onClick={() => this.props.doLogin()}

或

onClick={this.props.doLogin.bind(this)}

修复。