不知道为什么页面调用数据没有问题,但是执行后封包发现页面一直在不断循环渲染页面,疯狂调用服务端请求 问题截图
源代码
import {?PageContainer?} from '@ant-design/pro-layout';
import React,?{?PureComponent?} from 'react';
import {?Space,?Card,?Radio,?Table?} from 'antd';
import styles from './index.less';
import {?connect?} from 'umi';
const columns?=?[
{
title: "编号",
dataIndex: "cover",
key: "cover",
render:?text => <img width="50" src={text}></img>
},
{
title: "视频描述",
dataIndex: "title",
key: "title",
render:?text => <a>{text}</a>
},
{
title: "播放量",
dataIndex: "play_count",
key: "play_count"
},
{
title: "点赞",
dataIndex: "digg_count",
key: "digg_count"
},
{
title: "评论",
dataIndex: "comment_count",
key: "comment_count"
},
{
title: "发布时间",
dataIndex: "create_time",
key: "create_time"
},
{
title: "状态",
dataIndex: "video_status",
key: "video_status"
},
//?{
//???title:?"点赞",
//???key:?"tags",
//???dataIndex:?"tags",
//???render:?tags?=>?(
//?????<span>
//???????{tags.map(tag?=>?{
//?????????let?color?=?tag.length?>?5???"geekblue"?:?"green";
//?????????if?(tag?===?"loser")?{
//???????????color?=?"volcano";
//?????????}
//?????????return?(
//???????????<Tag?color={color}?key={tag}>
//?????????????{tag.toUpperCase()}
//???????????</Tag>
//?????????);
//???????})}
//?????</span>
//???)
//?},
{
title: "操作",
key: "action",
//?render:?(text,?record)?=>?(
//???<span>
//?????<a?style={{?marginRight:?16?}}>查看?</a>
//?????<a>删除</a>
//???</span>
//?)
}
];
class PageOpenVideoList extends PureComponent?{
//?连接models层
componentDidMount()?{
const {?dispatch,?account_list?}?= this.props;
dispatch({
type: 'models_open/get_account_list',
payload:?{},
});
}
state?=?{
user_id: ''
};
onChange?=?(e) => {
console.log('radio?checked',?e.target.value);
this.setState({
user_id:?e.target.value,
});
const {?dispatch?}?= this.props;
dispatch({
type: 'models_open/get_list_video',
payload:?{
'id':?e.target.value,
'cursor': 0,
'rowcount': 20,
},
});
};
render()?{
const {
account_list,
list_video,
}?= this.props;
const data?=?[];
Array.from(account_list).forEach(function (element)?{
data.push({
value:?element.ID,
label:?element.NickName,
});
});
return (
<PageContainer className={styles.main}>
<Space direction="vertical">
<Card title="选择查询账号" hoverable="true">
<div className={styles.container}>
<div id="components-radio-demo-radiobutton-solid">
<div>
<div>
<Radio.Group buttonStyle="solid" options={data}
onChange={this.onChange}
optionType="button"
>
</Radio.Group>
</div>
</div>
</div>
</div>
</Card>
<Card title="视频列表" hoverable="true">
<div className={styles.container}>
<div id="components-table-demo-basic">
<Table columns={columns} dataSource={list_video} />
</div>
</div>
</Card>
</Space>
</PageContainer>
);
}
}
export default connect(({?models_open?}) => ({
account_list:?models_open.account_list,
list_video:?Object.values(models_open.list_video),
}))(PageOpenVideoList);
import {?list_account,?delete_account,?oauth,?list_video,refresh?} from "@/services/services_open";
export default {
namespace: "models_open",
state:?{
data:?[],
model_back_data:?String,
account_list:?[],
list_video:?[],
back_message:String,
},
effects:?{
/**
* @param payload 参数
* @param call 执行异步函数调用接口
* @param put 发出一个?Action，类似于?dispatch?将服务端返回的数据传递给上面的state
* @returns {IterableIterator<*>}
*/
*list_account({?payload?},?{?call,?put?})?{
const response?= yield call(list_account,?payload);
yield put({
//?这行对应下面的reducers处理函数名字
type: "save",
payload:?response
});
},
*delete_account({?payload?},?{?call,?put?})?{
const response?= yield call(delete_account,?payload);
yield put({
//?这行对应下面的reducers处理函数名字
type: "del",
payload:?response
});
},
*oauth({?payload?},?{?call,?put?})?{
const response?= yield call(oauth,?payload);
yield put({
//?这行对应下面的reducers处理函数名字
type: "oauth_save",
payload:?response
});
},
*refresh({?payload?},?{?call,?put?})?{
const response?= yield call(refresh,?payload);
yield put({
//?这行对应下面的reducers处理函数名字
type: "refresh",
payload:?response
});
},
*get_account_list({?payload?},?{?call,?put?})?{
const response?= yield call(list_account,?payload);
yield put({
//?这行对应下面的reducers处理函数名字
type: "get_account_list",
payload:?response
});
},
*get_list_video({?payload?},?{?call,?put?})?{
const response?= yield call(list_video,?payload);
yield put({
//?这行对应下面的reducers处理函数名字
type: "get_list_video",
payload:?response
});
},
},
reducers:?{
/**
*
* @param state
* @param action
* @returns {{[p:?string]:?*}}
*/
save(state,?action)?{
return {
...state,
data:?action.payload
};
},
del(state,?action)?{
return {
...state,
data:?action.payload
};
},
refresh(state,?action)?{
return {
...state,
back_message:?action.payload
};
},
oauth_save(state,?action)?{
return {
...state,
model_back_data:?action.payload
};
},
get_account_list(state,?action)?{
return {
...state,
account_list:?action.payload
};
},
get_list_video(state,?action)?{
return {
...state,
list_video:?action.payload
};
},
}
};
