`

【解决】React setState延迟delay导致数据更新不及时,代码无法正确执行

阅读更多

之前React setState后在另一个函数调用state的值没有更新:

 

// init state.type = 'new';

activeMenu(type) {
  // type = top
  if (type == this.state.type) return;
  this.loadList(type);
}

loadList(type) {
  this.setState({
    items: [],
    type: type
  });

  .........
  // type  is top, but this.state.type still is new
}

 

 

改进后的setState是这样的:

 

// 使用setState的回调函数即可解决  
activeMenu(type) {
    if (type == this.state.type) return;
    this.setState({
      items: [],
      page: 1,
      type: type,
      isLoading: false,
      isLoadedFinished: false
    }, function() {
      this.loadList();
    });
  }

loadList() {
  // 这样我们就可以愉快及时的使用 state里面的值
  。。。
  。。。
}

 

 

 

有疑问或技术交流,扫描公众号一起讨论学习。

更多React在线学习访问:http://each.sinaapp.com/react/index.html


更多实例应用扫码体验:

分享到:
评论

相关推荐

    React:setState详解

    react之setState遇到的坑、解释setState为什么是异步的、怎样变成同步setState。。。。。。

    react-EasyState一个使用纯原生JavaScript替换React的setState的库

    Easy State: 一个使用纯原生JavaScript替换React的setState的库

    【JavaScript源代码】详细谈谈React中setState是一个宏任务还是微任务.docx

    综上所述,`setState`在React中的执行并不是简单的宏任务或微任务。它实际上是通过React框架的内部机制来控制的。虽然在某些情况下看起来像同步执行,但实际上是由React框架通过批量更新等方式来管理的。理解这一点...

    06-react-setState.md

    这意味着你不能在调用`setState`后立即获得更新后的状态,因为React会将多个`setState`调用合并到一个更新周期中,以提升性能。在`setState`调用之后立即访问`this.state`可能得到旧的值,因为状态更新还未完成。 `...

    详解React中setState回调函数

    React中setState回调函数是React框架中的一种重要机制,用于更新组件的状态。setState函数是异步的,因此在使用时需要特别注意。下面将详细介绍setState回调函数的使用方法和注意事项。 首先,setState函数的语法是...

    【JavaScript源代码】代码解析React中setState同步和异步问题.docx

    在React开发中,`setState`方法是用于更新组件的状态对象(`state`)的关键方法,它的行为有时会被误解,因为它可以表现出同步或异步的特性。理解这些特性对于编写高性能和可靠的React应用至关重要。 首先,我们要...

    setState执行流程1

    这个过程中,React会检查是否有任何需要执行的更新,包括`setState`导致的组件状态变更。 一旦发现有更新需要执行,`ReactUpdates.flushBatchedUpdates`被调用,开始执行队列中的更新。对于每个需要更新的组件,...

    react入门学习代码

    3. **状态和属性**:React组件有两种数据,一种是属性(props),由父组件传递给子组件;另一种是状态(state),组件内部管理,可以通过`this.setState()`方法进行更新。理解如何正确使用这两者对于掌握React至关重要。...

    基于React实现表单数据的添加和删除详解

    在上面的代码中,我们使用了this.setState方法来更新状态的值。 当用户点击保存按钮时,我们可以将输入框中的值添加到arr状态中: ``` onButtonClick(e) { var val = this.state.val this.setState({ arr: [val,...

    深入掌握 react的 setState的工作机制

    setState 是 React 框架中最常用的方法之一,它允许开发者更新组件的状态。但是,setState 的工作机制却是 React 中最容易被误解的地方。今天,我们将深入探讨 setState 的工作机制,以便更好地理解和使用 setState...

    react-ReactNative中文网推出的代码热更新服务

    "react-native-pushy"是一个专门为React Native设计的热更新组件,旨在解决上述问题。它允许开发者在用户使用应用的过程中,无需重新安装应用就能实现代码的更新。这种技术通常被称为热修复或热加载,它极大地提高了...

    react-composestate是一个在React中组成多个状态更新器的库

    `react-composestate`库的核心功能是允许开发者将多个`setState`调用合并到一个函数中,这样可以更高效地处理复杂的组件状态更新。在React中,`setState`通常用于改变组件的状态,并触发重新渲染。当有多个状态需要...

    reactdelayedlist延迟列表渲染React组件

    综上所述,`react-delayed-list`是一个强大的React组件,它通过延迟渲染和虚拟化技术,有效地解决了大数据量列表的性能问题。结合合理的配置和使用,它可以极大地提升应用的用户体验。在实际开发中,根据项目的具体...

    ReactBatch用于执行频繁更新的批量组件计数或间隔刷新

    在React应用中,当状态改变触发重新渲染时,如果不做处理,频繁的更新可能会导致浏览器进行大量不必要的DOM操作,从而影响用户体验和应用性能。ReactBatch的引入正是为了解决这个问题。 ReactBatch允许React将多个...

    16 如何理解 React 中的更新与任务慕课专栏1

    React使用这个属性来处理优先级不同的更新,确保高优先级的更新能够及时被执行。当expirationTime到达时,如果某个更新还未执行,React会确保这个更新被处理。React中,expirationTime的值可以通过Math.pow(2, 31) -...

    react-解决react后台管理问题方案

    Jest和Enzyme是React开发中常用的测试工具,它们可以帮助你编写单元测试和集成测试,确保代码的功能正确无误。 最后,为了提高开发效率,使用像ESLint这样的代码风格检查工具和Prettier这样的代码格式化工具是必要...

    react-native 解决ios中部分版本不能输入中文

    ### React Native iOS 中文输入问题解析与解决方案 #### 背景介绍 在React Native开发过程中,遇到iOS设备上部分版本无法输入中文的情况时有发生。这类问题往往给开发者带来不小的困扰,尤其是在需要用户进行中文...

    深入研究React中setState

    React中setState的机制是基于队列机制的,通过updater对象的enqueueSetState和enqueueCallback方法来实现状态的更新和回调函数的执行。这样可以避免重复的View刷新,简化我们的逻辑,并减少代码量。

    react-native-pushy, ReactNative中文网推出的代码热更新服务.zip

    React Native Pushy是一种由ReactNative中文网推出的代码热更新服务,专为React Native应用设计,旨在简化移动应用的更新流程,提高开发效率。热更新,也称为远程代码加载或在线更新,允许开发者在用户设备上无需...

Global site tag (gtag.js) - Google Analytics