极客观点
项目管理
HarmonyOS
不知道为什么页面调用数据没有问题,但是执行后封包发现页面一直在不断循环渲染页面,疯狂调用服务端请求 问题截图
源代码
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
};
},
}
};