(三百先生)艾一

(三百先生)艾一 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

(三百先生)艾一 提出了问题 · 9月24日

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" data-original={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

 };

 },

 }

};

关注 1 回答 0

(三百先生)艾一 关注了专栏 · 9月23日

python性能及架构优化

后端研发工程师(python、golang),专注性能优化、架构设计、微服务等

关注 342

(三百先生)艾一 关注了专栏 · 9月23日

OPPO互联网技术

OPPO前沿互联网技术及活动分享,公众号:OPPO_tech

关注 675

(三百先生)艾一 关注了用户 · 9月23日

铂赛东 @bosaidong_5c495684bcf4b

开源作者&内容创作者,专注于架构,开源,微服务,分布式等领域的技术研究和原创分享

欢迎关注公众号:「元人部落」,你能第一时间获取到我的原创内容

关注 2629

(三百先生)艾一 关注了专栏 · 9月23日

民工哥技术之路

公众号:民工哥技术之路、《Linux系统运维指南 从入门到企业实战》作者。专注系统架构、高可用、高性能、高并发,数据库、大数据、数据分析、Python技术、集群中间件、后端等开源技术分享。

关注 16084

(三百先生)艾一 关注了专栏 · 9月23日

前端自习课

pingan8787前端开发学习记录

关注 346

(三百先生)艾一 关注了专栏 · 9月23日

达达前端

达达前端技术社群:囊括前端Vue、JavaScript、数据结构与算法、实战演练、Node全栈一线技术,紧跟业界发展步伐,一个热爱前端的达达程序员。

关注 1112

(三百先生)艾一 关注了专栏 · 9月23日

ApachePulsar

Apache Pulsar 是 Apache 软件基金会顶级项目,是下一代云原生分布式消息流平台,集消息、存储、轻量化函数式计算为一体。该系统源于 Yahoo,最初在 Yahoo 内部开发和部署,支持 Yahoo 应用服务平台 140 万个主题,日处理超过 1000 亿条消息。Pulsar 于 2016 年由 Yahoo 开源并捐赠给 Apache 软件基金会进行孵化,2018 年成为 Apache 软件基金会顶级项目。Pulsar 采用计算与存储分离的分层架构设计,支持多租户、持久化存储、多机房跨区域数据

关注 153

(三百先生)艾一 关注了用户 · 9月23日

小齐本齐 @xiaoqibenqi

公众号/B站:码农田小齐
在这里分享我的个人经历和技术文章,希望能给你带来力量和启发。

回复【666】领齐姐福利包。
回复【进群】有 4 类交流群,总有一款适合你:

  1. 国内读者交流群
  2. 海外读者交流群
  3. 自习打卡群,了解自习打卡规则请回复【自习】
  4. 好文分享群

愿我们一起成为更好的人,期待与你相遇️️

关注 1849

(三百先生)艾一 关注了专栏 · 9月23日

SegmentFault 行业快讯

第一时间为开发者提供行业相关的实时热点资讯

关注 25634

认证与成就

  • 获得 0 次点赞
  • 获得 1 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 1 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 9月23日
个人主页被 109 人浏览