关于setState 的问题

Question

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

Answer 1

双越 2017-05-03 22:43:25

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

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

• 提问者 如刀似剑 #1

  this.setState({
     isLoadingMore: true
  });
  console.log(this.state.isLoadingMore);
  
  setState之后不会立即拿到state的值，那么做的判断是不是不是很准确？

• 双越 回复 提问者 如刀似剑 #2

  关键是你要立刻拿到state的值干嘛呢？不要自己创造需求

• 提问者 如刀似剑 回复 双越 #3

  拿到的isLoading的值可能不对，会造成重复请求，还有loading ui切换是不是会有延迟呢？当然解决重复请求的方法有很多,只是react用的不多,最好能提一下吧。

点开查看后面1条评论

Answer 2

兜兜 2017-05-04 16:07:51

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

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

Answer 3

慕仔3077336 2017-10-22 15:56:31

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

Answer 4

提问者 如刀似剑 2017-05-03 22:58:06

123