• 1
  • 新人请关照

antd 页面一直循环调用服务端请求的问题

不知道为什么页面调用数据没有问题,但是执行后封包发现页面一直在不断循环渲染页面,疯狂调用服务端请求 问题截图

image
image

源代码

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

 };

 },

 }

};
阅读 92
评论
    0 个回答
    撰写回答

    登录后参与交流、获取后续更新提醒

    相似问题
    推荐文章