异步加载数据界面刷新的问题

[xiaopanghhh]

Api代码部分：

export async function getConstants(params) {
  return request(`/api/constants?${stringify(params)}`);
}

Dva部分

import { getConstants } from '@/services/autocode';
import { getLocale } from 'umi/locale';

export default {
  namespace: 'constants',

  state: {
    constants: {},
  },

  effects: {
    *getConstants({params}, { call, put }) {
      const response = yield call(getConstants, {locale:getLocale(), ...params});
      yield put({
        type: 'saveConstants',
        constants: response,
      });
    },
  },

  reducers: {
    saveConstants(state, { constants }) {
      return {
        ...state,
        constants
      };
    }
  }
};

界面总分

import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { formatMessage, FormattedMessage } from 'umi/locale';
import {
  Form,
  Input,
  Select,
  Button,
  Card,
  Radio,
  Spin,
} from 'antd';

import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import styles from './technicalFrameworkStyle.less';

const {Group: RadioGroup ,Button:RadioButton}  = Radio;

const FormItem = Form.Item;

@connect(({ technicalFramework, constants, loading }) => ({
  constants,
  technicalFramework,
  constantsLoading: loading.effects['constants/getConstants'],
  currentTechnicalFrameworkLoading: loading.effects['technicalFramework/getTechnicalFramework'],
  submitting: loading.effects['technicalFramework/saveTechnicalFramework'],
}))
@Form.create()
class TechnicalFrameworkEdit extends PureComponent {
  componentDidMount() {
    const { dispatch , match} = this.props;
    dispatch({
      type: 'constants/getConstants'
    });
    if (match.params && match.params.frameworkId) {
      dispatch({
        type: 'technicalFramework/getTechnicalFramework',
        frameworkId: match.params.frameworkId
      });
    }
  }

  handleSubmit = e => {
    const { dispatch, form } = this.props;
    e.preventDefault();
    form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        dispatch({
          type: 'technicalFramework/saveTechnicalFramework',
          technicalFramework: values,
        });
      }
    });
  };

  handleLanguageChange = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'constants/getConstants',
      params: {
        language : e.target.value
      }
    });
  };

  render() {
    const { constants, technicalFramework, constantsLoading, currentTechnicalFrameworkLoading, submitting} = this.props;
    const { currentTechnicalFramework } = technicalFramework;
    const { trueFalse, language } = constants.constants;
    const {
      form: { getFieldDecorator, getFieldValue },
    } = this.props;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 10 },
      },
    };

    const submitFormLayout = {
      wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 10, offset: 7 },
      },
    };

    return (
      <PageHeaderWrapper
        title={<FormattedMessage id="app.forms.basic.title" />}
        content={<FormattedMessage id="app.forms.basic.description" />}
      >
        <Card bordered={false} loading={constantsLoading || currentTechnicalFrameworkLoading || submitting}>
          <Form onSubmit={this.handleSubmit} hideRequiredMark style={{ marginTop: 8 }}>
            <FormItem {...formItemLayout} label={<FormattedMessage id="form.title.label" />}>
              {getFieldDecorator('title', {
                initialValue: currentTechnicalFramework.name,
                rules: [
                  {
                    required: true, message: formatMessage({ id: 'validation.title.required' }),
                  },
                ],
              })(<Input placeholder={formatMessage({ id: 'form.title.placeholder' })} />)}
            </FormItem>


            <FormItem {...formItemLayout} label={<FormattedMessage id="form.title.label" />}>
              {getFieldDecorator('language', {
                rules: [{
                  required: true, message: '请选择语言/Please select Language',
                }],
              })(
                !constantsLoading && language ?
                  <RadioGroup onChange={e => {this.handleLanguageChange(e)}}>
                    {
                      language.map((data) =>
                        <RadioButton value={data.value} key={data.value}>{data.label}</RadioButton>
                      )
                    }
                  </RadioGroup>
                  :
                  <Spin />
              )}
            </FormItem>


            <FormItem {...formItemLayout} label={<FormattedMessage id="form.date.label" />}>
              {getFieldDecorator('extendNmxpsoftBase', {
                initialValue: currentTechnicalFramework.extendNmxpsoftBase,
                rules: [
                  {
                    required: true,
                    message: formatMessage({ id: 'validation.date.required' }),
                  },
                ],
              })(
                !constantsLoading && trueFalse ?
                  <RadioGroup>
                    {
                      trueFalse.map((data) =>
                        <RadioButton value={data.value} key={data.value}>{data.label}</RadioButton>
                      )
                    }
                  </RadioGroup>
                  :
                  <Spin />
              )}
            </FormItem>
            <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
              <Button type="primary" htmlType="submit" loading={submitting}>
                <FormattedMessage id="form.submit" />
              </Button>
              <Button style={{ marginLeft: 8 }}>
                <FormattedMessage id="form.save" />
              </Button>
            </FormItem>
          </Form>
        </Card>
      </PageHeaderWrapper>
    );
  }
}

export default TechnicalFrameworkEdit;

运行效果如下：

当语言切换的时候。

handleLanguageChange = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'constants/getConstants',
      params: {
        language : e.target.value
      }
    });
  };

这个函数执行完成就会将界面刷新是啥原因。

[chenshuai2144]

constantsLoading ，你查询的时候 constantsLoading 会发现变化的，card 会清空一波你的

[xiaopanghhh]

感谢解答