Question

我正在使用React＆amp; amp ;;开发一个简单的验证表单组件。反应-引导。我决定使用promises实现我的一些功能，以便我可以灵活地将它们链接在一起。但由于某种原因，我的then条款没有被执行。这是（简化）代码：

import React, { Component, PropTypes } from 'react';
import { FormGroup, ControlLabel, FormControl, HelpBlock } from 'react-bootstrap';
import validate from 'validate.js';

export default class EmailInput extends Component {
    // define the propTypes required by this component
    //
    static propTypes = {
        validation:  PropTypes.object,
    };

    constructor(props) {
        super(props);

        // initialize the state for this component
        //
        this.state = {
            value: this.props.value,
            hasChanged: false,
            validationErrors: [],
        };
    }

    updateState(newState) {
        console.log('-------- updateState', this.state, newState);
        return new Promise(
            (resolve) => {
                console.log('-------- updateState promise', this.state, newState);
                this.setState(
                    newState,
                    () => {
                        console.log('-------- updateState in setState callback', this.state);
                        resolve();
                    }
                );
            }
        );
    }


    onChange(event) {
        console.log('-------- onChange', this.state);
        this.updateState({ value: event.target.value })
            .then(() => {
                // **** this is not being executed ****
                console.log('--------- DONE');
            });
    }

    onBlur() {
        // basically the same as the onChange event
    }

    render() {

        const hasErrors = this.state.hasChanged && this.state.validationErrors.length>0;

        const validationState = hasErrors ? 'error' : null;
        const feedback = hasErrors ? (<FormControl.Feedback />) : null;
        const helpBlock = hasErrors ? (<HelpBlock>{this.state.validationErrors.join('. ')}</HelpBlock>) : null;

        return (
            <FormGroup validationState={validationState}>
                <ControlLabel>{this.props.label}</ControlLabel>
                <FormControl
                    type="text"
                    value={this.state.value}
                    placeholder={this.props.placeholder}
                    onChange={this.onChange.bind(this)}
                    onBlur={this.onBlur.bind(this)}
                />
                {feedback}
                {helpBlock}
            </FormGroup>
        );
    }
}

关于我的环境的几句话：我使用Webpack＆amp; amp; Babel转换器并在Karma测试套件的环境中执行此代码。

简而言之，我所做的就是创造了一个“未经宣传的”＃34;名为setState的{{1}}方法。它只返回一个在执行updateState回调时解析的新promise。正如您所看到的，我在代码中散布了setState个语句，因此我可以跟踪正在进行的操作。

我期待看到的是＆＃34; onChange＆＃34;记录消息，然后是三个＆＃34; updateState＆＃34;消息，然后＆＃34; DONE＆＃34;消息。

我实际看到的是＆＃34; onChange＆＃34;消息，然后是＆＃34; updateState＆＃34;消息，没有别的。但是，状态正在正确更新。我还应该提一下，我已经用console.log处理程序尝试了所有的承诺，但也没有发现任何错误。

我可能会忽略一些令人眼花缭乱的明显事物，但我无法承受更多的头发。有人能看到我在这里做错了吗？

为什么我的承诺在React组件中没有正确执行？

0 个答案: