组件化-select list

Posted 2021-03-16 sunxiaolong905417077

（一）page

1 引入ant message 组件
2 定义state中接收数据
state = {
  stateData:[], 
};
3 请求数据
componentDidMount() {

  this.queryStateSelectList()
}

queryStateSelectList = ()=>{

    const { dispatch } = this.props;
    dispatch({
      type: ‘TaskManage/StateSelectList‘,
      payload: ‘‘,
      callback:(res)=>{
        if(res.code == 20000){
          this.setState({stateData:res.data})
        }else{
          message.error(res.msg)
        }
      }
    });
  }

{this.renderSelectOption(stateData,‘key‘,‘val‘)}

renderSelectOption = (data,key,val)=>{
  let arr = []
  if(data && data.length > 0){
    data.map((item)=>{
      arr.push(<Option value={item[key]} key={item[key]}>{item[val]}</Option>)
    })
  }
  return arr;
}

（二）modal

*StateSelectList({ payload, callback }, { call }) {
  const response = yield call(StateSelectListReq, payload);
  if (callback) callback(response);
},

（三）services

export async function StateSelectListReq() {

  return request(‘/task/types‘);
}