前言

字典表级联的需求我们在项目里边也是经常碰到，下一级选择栏依赖于上一级选择栏选中的结果，对于model中定义state，一定要用不同的key值代替不同的接口数据

问题

对于多次请求的接口，如果只用一个key值，下次接口数据render的时候，上次接口请求的数据就会被覆盖或者出现下次接口请求的数据不会更新的bug

实例

比如在routes文件夹下的组件中请求接口数据

const CreateForm = Form.create()(props => { //创建组件CreateForm，为Operation子组件
          
  const { getFieldDecorator } = props.form;
  const { optionsA, handleChangeA, handleChangeB, optionsB } = props; //获取父组件传入子组件的值
  ......
  const handleSelectChangeA = (id) => { 
    handleChangeA(id)  
  };
  const handleSelectChangeB = (id) => { 
    handleChangeB(id)  
  };
 return (...)
}

// 关联model中的数据，在render中直接用this.props可以获取state中的数据
@connect(({ operation }) => ({
   ...operation,
}))
@Form.create()

export default class Operation extends PureComponent {

  // 组件初始化请求数据
  componentDidMount() {
    const { dispatch } = this.props;
    const query = {
      level: 'a',
      pId: 0
    }
    dispatch({
      type: 'operation/fetch',
      payload: query,
    });
  }
    
  // handleChangeA为第一个select选中时处理数据的函数
  handleChangeA = id => {
    console.log('id', id)
    const { dispatch } = this.props;
    const params = {
      level: 'b',
      pId: id
    };
    dispatch({
      type: 'operation/fetch',
      payload: params,
    });  
  }

  // handleChangeB为第二个select选中时处理数据的函数
  handleChangeB = id => {
    console.log('id', id)
    const { dispatch } = this.props;
    const params = {
      level: 'c',
      pId: id
    };
    dispatch({
      type: 'operation/fetch',
      payload: params,
    });  
  }

  render() {
    ......

    // 将方法handleChange传入子组件CreateForm
    const parentMethods = {
      handleChangeA: this.handleChangeA,
      handleChangeB: this.handleChangeB,
    };

    //处理数据格式，过滤出选中的id和professionalName，用以传入子组件CreateForm
    const optionsA = (this.props.aTags || []).map(item => <Option key={item.id}>{item.professionalName}</Option>)
    const optionsB = (this.props.bTags || []).map(item => <Option key={item.id}>{item.professionalName}</Option>)
        
    return (
      <div className={styles.tabs}>
        <Tabs defaultActiveKey="2" onChange={callback} tabBarStyle={{ marginBottom: 24 }}>
          <TabPane tab="tab1" key="1">Content of Tab Pane 1</TabPane>
          <TabPane tab="tab2" key="2">
            <Collapse bordered={false} defaultActiveKey={['2']}>
              <Panel header="panel1" key="1">
              </Panel>
              <Panel header="panel2" key="2">
              <CreateForm {...parentMethods} optionsA={optionsA} optionsB={optionsB}/>
              </Panel>
              <Panel header="panel3" key="3">
              </Panel>
            </Collapse>
          </TabPane>
          <TabPane tab="tab3" key="3">Content of Tab Pane 3</TabPane>
        </Tabs>
     </div>
   );
  }
}

然后在model下对数据请求进行逻辑处理

export default {
  namespace: 'operation',
  state: {
    aTags: [],
    bTags: [],
    cTags: [],
  },
  effects: {
    *fetch({ payload }, { call, put }) {
      const { level } = payload;
      const levelMap = {
        'a': 'aTags',
        'b': 'bTags',
        'c': 'cTags',
      }
      const target = levelMap[level];
      const response = yield call(query,payload);
      const result = {
        [target]: response,
      }
      console.log('----', result);
      yield put({
        type: 'saveTag',
        payload: result,
      });
    },
  },
  reducers: {
    saveTag(state, action) {
      return {
        ...state,
        ...action.payload,
      };
    },
  },
}

这里的aTags: []，bTags: []，cTags: []分别存放三次请求的数据，而不是直接定义Tags来存放三次请求数据

类似于这种结果界面