Question

我不确定如何处理这个问题我有一个React组件，它有一个刷新延迟或什么，因为当我更改下拉框并转到已输入的输入框来更改值时，输入将更改为以前的值。

这只发生在大型网络上，所以我认为进出服务器的速度是个问题。

我不确定是否实施去抖可以解决它，可能像onFocus去抖或onChange debouce。

如果问题的结构不明确，我很抱歉，但我不确定要求的内容。

    var React = require('react');
    var PureRenderMixin = require('react/addons').addons.PureRenderMixin;
    var util = require('../../../../util/MelaUtil');
    var form = require('react-bootstrap').form;
    var Input = require('react-bootstrap').Input;
    var ButtonInput = require('react-bootstrap').ButtonInput;
    import CustomizationStore from '../../../../shared/stores/CustomizationStore';
    import { Row, Col, Button } from 'react-bootstrap';

    //set state debounced utility variables
    let debouncerFn;//initialize in setInitialState
    let newState = {};
    const debouncedSetState =
        function(state){
            newState = util.joinObjects(newState,state);
            debouncerFn();
        };


    var MedicationForm = React.createClass({

    propTypes: {
        giItem               : React.PropTypes.object,
        updateItem           : React.PropTypes.func,
    },


    mixins : [PureRenderMixin, MelaForm],

    getInitialState: function(){
        //helper for debouncerFn
        const toState = () => {
            this.setState(newState);
            newState = {};
        };

        //This make setstate from store less often
        //For microptimization. We will debounce not important Stores to avoid some unnecesary calls to render.
        debouncerFn = util.debounce(toState,10000,true,true);

        return {medication: this.props.giItem,
                type:       this._getType(this.props.giItem.med_type),
                errors:{},
        };
    },

    _saveState: function(){
        return debouncedSetState(util.saveStateWithoutErrors(this.state.medication, this.props.giItem, this.state.errors, this.props.updateItem));
        // return util.saveStateWithoutErrors(this.state.medication, this.props.giItem, this.state.errors, this.props.updateItem);
    },




    componentWillReceiveProps:function(nextProps){
        nextProps.medication = nextProps.giItem;
        util.recivePropWithoutErrors(nextProps,this.state,'medication',this.setState.bind(this));

        this.setState({type :      this._getType(nextProps.medication.med_type)});
    },



    render: function() {
        return (
            <form style={{marginTop:0}}>
                <div className="col-sm-12 col-lg-12">


                    <Row>

                        <Col xs={4}>
                            {this.state.medication.item.dose && this._getRowWithTwoInputs(
                                this._getInputComponent("medication","med_dose",{label:'Dose',onBlur:this._saveState}),
                                this._getDropdownComponent("medication", "unit", {label:"Unit", list:this.props.doseUnitsList, onBlur:this._saveState})
                            )}
                        </Col>
                    </Row>
                    <Row>
                        <Col xs={4}>
                            {this.state.medication.item.route && this._getDropdownComponent("medication", "med_route", {label:"Route", list:this.props.routeList, onBlur:this._saveState})}
                        </Col>


                    </Row>

                </div>
            </form>
        );
    }
});

module.exports = MedicationForm;

状态更新后反应缓慢然后写入值

0 个答案: