Javascript 异步组件DidMout和forceUpdate

发布于12月16日

我不明白，为什么在所附的代码示例中，async componentDidMount方法不立即运行forceUpdate，而是等待funcLazyLoadpromise 得到解决.我预计forceUpdate只会在这样的建筑中等待promise 的解决

import React from 'react'
import ReactDOM from 'react-dom'

let data = ''

async function funcLazyLoad(ms) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(ms)
    }, ms)
  })
}

class App extends React.Component {
  async componentDidMount() {
    data = await funcLazyLoad(1000)
    this.forceUpdate()
  }

  render() {
    console.log('Render')
    return <div>Hello {data}</div>
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

https://codesandbox.io/p/sandbox/practical-aryabhata-vg3h64?file=%2Fsrc%2Findex.js%3A15%2C30.

推荐答案

在你的代码中，componentDidMount方法被标记为async，它包含一个funcLazyLoad(1000)的await语句.

等待关键字暂停ComponentDidmount方法的执行，直到函数LazyLoad(1000)返回的Promise得到解析.

但是，由于funcLazyLoad返回在funcLazyLoad0毫秒的超时后解析的promise ，因此componentDidMount方法的其余部分(具体地说，this.forceUpdate()部分)将仅在promise 解析之后执行.

因此，事件的顺序如下:

componentDidMount是号召的.
funcLazyLoad(1000)被调用，该方法暂停，直到promise被解析.
在1000毫秒的延迟之后，promise 被解析，并且数据变量被更新.
this.forceUpdate()被执行，从而触发组件的重新呈现.

如果您想在拨打forceUpdate之前等待promise 解析，那么您当前的实现是正确的.如果要在呈现更新的数据之前等待Render方法中的解析promise ，则需要使用setState而不是forceUpdate，因为setState在完成时会触发重新渲染:

class App extends React.Component {
  async componentDidMount() {
    data = await funcLazyLoad(1000);
    this.setState({}); // This will trigger a re-render when the promise is resolved.
  }

  render() {
    console.log('Render');
    return <div>Hello {data}</div>;
  }
}

这样，将在解析Promise之后调用Render方法，以确保显示更新后的数据.

Javascript 异步组件DidMout和forceUpdate

推荐答案

Javascript相关问答推荐

如何提取Cypress中文本

如何将拖放功能添加到我已自定义为图像的文件输入HTML标签中？

使用JavaScript单击上一个或下一个特定按钮创建卡滑动器以滑动单个卡

如何在表格上拥有水平滚动条，在正文页面上拥有垂直滚动条，同时还对html表格的标题使用位置粘性？

node TS：JWT令牌签名以验证客户端和后台问题之间的身份验证

在页面上滚动 timeshift 动垂直滚动条

如何从调整大小/zoom 的SVG路径定义新的d属性？""

你怎么看啦啦队的回应？

在286之后恢复轮询

用于编辑CSS样式的Java脚本

无法使用单击按钮时的useState将数据从一个页面传递到另一个页面

如何强制Sphinx中的自定义js/css文件始终加载更改而不缓存？

这个值总是返回未定义的-Reaction

ChartJs未呈现

MarkLogic-earch.suggest不返回任何值

使用类型：assets资源 /资源&时，webpack的配置对象&无效

MongoDB通过数字或字符串过滤列表

如何在Highlihte.js代码区旁边添加行号？

有没有办法在R中创建一张具有多个色标的热图？

如何向内部有文本输入字段的HTML表添加行？