关于setState 的问题

来源:7-18 猜你喜欢-显示内容

如刀似剑

2017-05-03

react中setState本身是异步操作,state不会立即更新,根据state做的相关操作就会产生相关问题,这个问题有什么好的解决办法吗?

写回答

4回答

双越

2017-05-03

setState本身不是异步操作,state会立即更新的。你的意思是不是在异步操作中进行 setState ?

具体你说的相关问题,可以具体提出来,我根据场景去解答

0
4
如刀似剑
回复
双越
其实我觉得总的开讲之前,可以说下项目规划 结构划分 大概讲下思路会比较好,还有这个demo只是为了演示才加的redux,那么 redux大概多大的项目应用会比较好呢?谢谢
2017-05-04
共4条回复

兜兜

2017-05-04

setState 第二个参数可以接受回调函数 

this.setState({
        isLoadingMore: true
        },function(){
        console.log(this.state.isLoadingMore)
 })
1
0

慕仔3077336

2017-10-22

import React from 'react'
import PureRenderMinxin from 'react-addons-pure-render-mixin'

import {getListData} from '../../../fetch/home/home'
import './style.less'

import ListComponent from '../../../components/List'

class List extends React.Component {
   constructor(props, context) {
       super(props, context);
       this.shouldComponentUpdate = PureRenderMinxin.shouldComponentUpdate.bind(this);
       this.state = {
           data: [],
           hasMore: false,
           page:0
       }
   }

   render() {
       return (
           <div>
               <h2 className="home-list-title">猜您喜欢</h2>
               {
                   this.state.data.length
                       ? <ListComponent data={this.state.data}/>
                       : <div>{/*加载中...*/}</div>
               }
               {
                   this.state.data.length
               }
           </div>
       )
   }

   componentDidMount() {
       //获取首屏数据
       const cityName = this.props.cityName;
       const page = 0;
       const result = getListData(cityName, page);
       this.resultHandle(result);
   }

   resultHandle(result) {
       result.then(res => res.json())
           .then(json => {
               const data = json.data;
               const hasMore = json.hasMore;
               // console.log(hasMore);
               this.setState({
                   data: this.state.data.concat(data),
                   hasMore: hasMore
               })
               console.log(this.state.data.length);
           }).catch(ex => {
           if (__DEV__) {
               console.error('首页猜您喜欢获取数据报错, ', ex.message)
           }
       });
   }
}

export default List

0
0

如刀似剑

提问者

2017-05-03

123

0
0

React高级实战 打造大众点评Web App

已经对React Router4与Webpack2进行了项目升级

1711 学习 · 707 问题

查看课程