ReactJS - 渲染调用，但 DOM 未更新

IT技术 javascript reactjs dom
2021-05-08 03:22:17

这在我身上发生过几次。我一直设法解决这个问题，但我仍然很想了解为什么会发生这种情况，以及我错过了什么。

基本上，如果我的方法中有一个条件，render它指定了我的类div：

let divClass = this.state.renderCondition ? 'red' : 'blue';

默认情况下，我将renderCondition状态设置为 false。

如果我再定义onClick一个按钮的处理程序（如下图），然后按一下按钮，同时使IS调用，DOM是不更新。也就是说类没有变化。

onClickCompile: function() {

   this.setState({renderCondition: true}, function() {

        synchronousSlowFunction();
   });
}

这似乎有事情做与该跑的慢同步代码，如果代码是快速和简单的DOM IS适当更新。

如果我将调用包装synchronousSlowFunction在 500 毫秒的超时时间内，一切都会按预期进行。然而，我想了解我误解了什么，以至于我不需要这个黑客。

4个回答

你能分享按钮的onClick代码吗？我可能是错的，但这看起来像是一个错误设置的按钮 onClick 侦听器。

确保 onClick 回调是在没有 () 的情况下定义的，即 

<button onClick={this.something} />

代替：

<button onClick={this.something()} />

发布更多代码，以便我们可以获得更好（更大）的图片

synchronousSlowFunction 就像你提到的同步。这意味着，它会在您的组件运行时阻塞它。这意味着，该 react 无法更新您的组件，因为它必须等待回调函数完成，直到它可以使用更新的值调用 render 为止。setTimeout 包装使调用异步，以便 react 可以渲染/更新您的组件，同时函数正在执行其工作。让它工作的不是时间延迟，而是回调，而不是渲染阻塞。您还可以使用 Promise 包装或使慢速函数异步以防止渲染阻塞。

尝试这样的事情：

this.setState((state) => ({
   ...state, renderCondition: true
}));

也许你正在为 renderCondition 做另一个 setState ，上面的代码应该解决这些问题。

或者尝试使用 PureComponent

import React, { PureComponent } from 'react'

export default class TablePreferencesModal extends PureComponent {
  render() {
    return (
      <div>

      </div>
    )
  }
}

设置状态后使用此行

this.setState({})
其它你可能感兴趣的问题
上一篇如何强制 Cura 在一次运行中穿过一层？ 下一篇使用 Elegoo Mars (Pro) 打印和切片大件