this.setState()导致网页部分崩溃

Question

我发现，当fetch从api获取到数据之后，

1 2 3 4 5

fetch(`http://newsapi.gugujiankong.com/Handler.ashx?action=getuc&userid=${localStorage.userId}`, {method: 'GET'}) .then(res => res.json()) .then(json => {    this.setState({usercollection: json}); });

this.setState()会导致网页卡顿，查看控制台会报错堆栈溢出

而把this.setState注释就没事，请问老师遇到过这钟情况吗？

我有种猜测，fetch获得数据比较多，然后this.setState运行比较吃力？

以下是我自己个人中心页的源代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122

import React, {Component} from 'react'; import PCHeader from './pc_header'; import PCFooter from './footer'; import {   Tabs,   Row,   Col,   Upload,   Modal,   Icon,   Card } from 'antd'; const TabPane = Tabs.TabPane; export default class PCUserCenter extends Component {   constructor() {     super();     this.state = {       usercollection: '',       usercomments: '',       previewImage: '',       previewVisible: false     }   }   componentDidMount() {     fetch(`http://newsapi.gugujiankong.com/Handler.ashx?action=getuc&userid=${localStorage.userId}`, {method: 'GET'})     .then(res => res.json())     .then(json => {       this.setState({usercollection: json});     });     fetch(`http://newsapi.gugujiankong.com/Handler.ashx?action=getusercomments&userid=${localStorage.userId}`, {method: 'GET'})     .then(res => res.json())     .then(json => {       this.setState({usercomments: json});     });   }   handleCancel() {     this.setState({previewVisible: false});   }   render() {     const {usercollection, usercomments} = this.state;     const usercollectionList = usercollection.length       ? usercollection.map((uc, index) => (         <Card key={index} title={uc.uniquekey} extra={< a href = {           `/#/details/${uc.uniquekey}`         } > 查看 < /a>}>           <p>{uc.Title}</p>         </Card>       )).reverse()       : '您还没有收藏任何新闻';     const usercommentsList = usercomments.length       ? usercomments.map((comment, index) => (         <Card key={index} title={`您于${comment.datetime}评论了文章 ${comment.uniquekey}`} extra={< a href = {           `/#/details/${comment.uniquekey}`         } > 查看 < /a>}>           <p>{comment.Comments}</p>         </Card>       )).reverse()       : '您还没有发表过任何评论';     let props = {       action: 'http://newsapi.gugujiankong.com/Handler.ashx',       headers: {         "Access-Control-Allow-Origin": "*"       },       listType: 'picture-card',       defaultFileList: [         {           uid: -1,           name: 'xxx.png',           state: 'done',           url: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png',           thumbUrl: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png'         }       ],       onPreview: (file) => {         this.setState({previewImage: file.url, previewVisible: true});       }     };     return (       <div>         <PCHeader/>         <Row>           <Col span={2}></Col>           <Col span={20}>             <Tabs>               <TabPane tab="我的收藏列表" key="1">                 <div className="comment">                   <Row>                     <Col span={24}>                       {usercollectionList}                     </Col>                   </Row>                 </div>               </TabPane>               <TabPane tab="我的评论列表" key="2">                 <div className="comment">                   <Row>                     <Col span={24}>                       {usercommentsList}                     </Col>                   </Row>                 </div>               </TabPane>               <TabPane tab="头像设置" key="3">                 <div className="clearfix">                   <Upload {...props}>                     <Icon type="plus"/>                     <div className="ant-upload-text">上传照片</div>                   </Upload>                   <Modal visible ={this.state.previewVisible} footer={null} onCancel={this.handleCancel.bind(this)}>                     <img alt="预览" src={this.state.previewImage}/>                   </Modal>                 </div>               </TabPane>             </Tabs>           </Col>           <Col span={2}></Col>         </Row>         <PCFooter/>       </div>     );   } }

Answer 1

Parry 2017-06-09 11:07:02

map 上为何直接调用了 reverse()？

• 提问者 风硕依源 #1

  这个我是从评论模块获得的启发，这样评论就能从新到旧显示了
  这个问题应该与reverse没关系，我去掉了它同样会崩溃

• Parry 回复 提问者 风硕依源 #2

  你在试一下看看，没有直接在 map 上调用 reverse 的方法。

• 提问者 风硕依源 #3

  老师，我把reverse方法去掉了，还是会崩溃，问题应该就是setState导致的

点开查看后面1条评论