antdesign模态框+穿梭框闪现问题

闪现原因

onchange时的setState导致重新渲染

handleChange = (targetKeys) => {
    this.setState({ targetKeys }); 
  }

解决方法

把Modal单独抽离到一个组件中，将Modal的显示隐藏（visible）放到了子组件中

// 新建TransferModal
import React, { Component } from 'react';
import { Modal,Transfer } from 'antd';

class TransferModal extends Component {

  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };
  }

  showModelHandler = (e) => {
    if (e) e.stopPropagation();
    this.setState({
      visible: true,
    });
  };

  hideModelHandler = () => {
    this.setState({
      visible: false,
    });
  };

  okHandler = () => {
    this.setState({
      visible: false,
    });
  }

  filterOption = (inputValue, option) => {
    return option.description.indexOf(inputValue) > -1;
  };

  handleChange = (targetKeys) => {
    this.props.changeTargetKeys(targetKeys)
  };

  render() {
    const { children } = this.props;
    return (
      
        
          { children }
        
        
           item.name}
          />
        
      
    );
  }
}

export default TransferModal;

父组件异步获取数据，修改state，TransferModal中穿梭框的onchange传回父组件进行处理。

//父组件中获取数据
  getGroupData = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'listGroup/fetch',
    }).then((data) => {  //这里需要在effects中return一下，才能拿到回调
      this.setState({ groupData:data.data.list })
    });
  };

  handleGroupModalChange = (targetKeys) => {
    this.setState({ targetKeys });
  };

 this.handleGroupModalChange(targetKeys)}
  title="加入组"
>
  加入群组

model文件中effects的return

effects: {
    * fetch({ payload }, { call, put }) {
      const response = yield call(queryGroup, payload);
      yield put({
        type: 'save',
        payload: response,
      });
      return {
        data: response,
      };
    },
  }