antd design pro中effects会自动多调用一次

Question

使用antd design pro

 <span
    className={Style.opt}
    style={{
      color: canClickColor,
      cursor: canClickCursor,
    }}
    onClick={() =>{this.unAssignSource(record, index)}}
  >
    解绑
  </span>

unAssignSource = (record, index) => {
    const { dispatch } = this.props;
    const modal = confirm({
      title: '确认解绑',
      content: '此操作不可逆，请谨慎操作！',
      onOk: async () => {
        await dispatch({
          type: 'assignSource/unAssignSource',
          payload: {
            index,
            value: {
              category_id: record.category_id,
              resource_id: record.id,
            },
          },
        });
        modal.destroy();
      }
    })
  }

model中effects的代码

*unAssignSource({ payload }, { call, put }) {
    console.log('%cUN payload: ', 'color: #CC00FF; font-size: 18px;', payload)
    const { index, value } = payload;
    const response = yield call(unAssignSource, value);
    if (response && response.code === 200) {
      yield put({
        type: 'unAssignSource',
        payload: index,
      });
      message.success('删除成功！');
    }
}

reducers的代码

unAssignSource(stats, { payload }) {
  const newData = Array.from(stats.sourceList);
  newData.splice(payload, 1);
  return {
    ...stats,
    sourceList: newData,
  };
}

当我点击解绑的时候，unAssignSource这个effects执行了两次，而且第二次打印出来的payload是0
第二次是自动调用的，不知道什么原因，求大神解决一下

Answer 1

debug一下