Question

我有一个redux-form组件和另一个加载apollo graphql数据的容器组件。下面仅是代码的一些重要部分。

表单组件：

class Form extends Component {

  constructor(props) {
    super(props);
    setTimeout(function() {
      this.executeCode ( 'onChangeInput', { action: 'initForm' , props: this.props, formProps: this.props, formState: this.state  });
    }.bind(this), 1000);
  }
  render() {
     (...)
  }
}
const ComponentWithData = reduxForm({
  form: nameForm, 
  validate,
})(Form);

function mapStateToProps(state, ownProps) {
  const log = false;
  const statesReturn = { myState: state };
  let initialValues;
  initialValues = processValues(ownProps, tableCrud, ownProps.data, 'toClient','view' );
  statesReturn.initialValues = initialValues ;
  return statesReturn;
}

const ComponentWithDataAndState = connect(
  mapStateToProps,
  null,
)(ComponentWithData);

export default ComponentWithDataAndState;

容器组件：

class FormContainer extends Component {

  render() {


    const { t, ...otherProps} = this.props;
    let aElements = [];
    let aQlFiltered = {"crud_view_payment":{"table":"payment"}}; 
    const resultCheck = checkLoadCrud (aQlFiltered,this.props);
    if (resultCheck.messageError) {
      return <MsgError msg={resultCheck.messageError} t={this.props.t} />;
    }

    if (!resultCheck.globalLoading && !resultCheck.messageError) {
      if (this.props['crud_view_'+tableCrud] && this.props['crud_view_'+tableCrud][tableCrud]) {
        if (this.props['crud_view_'+tableCrud][tableCrud].deleted) {
    aElements.push(<RecordHeadInfo  
      key="recordhead"
      tableCrud={tableCrud} 
      {...this.props} 
      data={this.props['crud_view_'+tableCrud][tableCrud]} 
      />);
        }
      }
    }

    if (!resultCheck.globalLoading && !resultCheck.messageError) {
      aElements.push(<Form
        crudAction="View"
        key="mainform"
        id={ this.props.match.params.id }
      data={this.props['crud_view_'+tableCrud][tableCrud]}
        onSubmit={this.handleSubmit}
        containerPropsForm={this.props}
        t={this.props.t}
      />);
    }


    }
    return (
      <div>
        {aElements}
      </div>
    );

  }
}



const withGraphqlandRouter = compose(

  graphql(defQls.payment.View, {
    name: 'crud_view_payment',
    options: props => {
      const optionsValues = { variables: {id: props.match.params.id, _qlType: 'View' }};
      optionsValues.fetchPolicy = Tables[tableCrud].fetchPolicy ? Tables[tableCrud].fetchPolicy :'network-only';
      return optionsValues;
    },
  }),
)(withRouter(FormContainer));


const mapStateToProps = (state) => {
  return {
    myState: state,
  };
};


const mapDispatchToProps = (dispatch) => {
  return bindActionCreators ({ appSubmitStart,  appSubmitStop, showConfirm, initialize, dispatch }, dispatch );  // to set this.props.dispatch
};

const withState = connect(
  mapStateToProps ,
  mapDispatchToProps,
)(withGraphqlandRouter);



const ComponentFull = withState; 

export default ComponentFull;

在表单组件上，我有一个setTimeout来执行代码，因为我需要根据已加载的数据设置set disable或hidden字段。我不能直接在Construct（）和componentDidMount（）上执行此操作，因为如果我尝试从redux检索数据：this.props.myState.form（没有值）。这是因为使用超时，1000可以，1毫秒也可以，我看到了this.props.myState.form.myForm.values（从db trow apollo检索数据），我当然更喜欢1毫秒我没有看到禁用或消失的眨眼字段，但是我不确定这是一个好习惯，因为在速度较慢的计算机或浏览器中会与渲染产生冲突？

目前尚不清楚生命周期混合反应，redux，apollo和redux形式；有人知道我如何才能更好地整理我的想法，以便在此处编写更好的代码？

生命周期react，redux和redux形式的apollo-graphql

0 个答案: