Question

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

基本上如果我的render方法中有条件指定我div的类：

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

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

如果我然后在按钮上定义onClick处理程序（如下所示），并单击按钮，同时调用 IS ，则DOM为 NOT 更新。也就是说，班级不会改变。

onClickCompile: function() {

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

        synchronousSlowFunction();
   });
}

这似乎与运行慢速同步代码有关，因为如果代码快速而简单，DOM IS 正确更新。

如果我在500毫秒超时中将调用包装到synchronousSlowFunction，则一切都按预期工作。但是，我想了解我所误解的内容，以至于我不需要这个黑客。

Answer 1

您可以共享按钮onClick代码吗？我可能是错的，但这似乎是按钮的onClick侦听器设置错误。

确保定义的onClick回调不带（），即

extends Control

var CURRENT_HIGHEST_LEVEL = globals.CURRENT_LEVEL
#onready var level_buttons = buttons.get_children()
var button_init_pos  = Vector2(100,100)
# Called when the node enters the scene tree for the first time.
onready var buttons = get_node("Buttons")
func _ready():
    print(buttons)
    print(CURRENT_HIGHEST_LEVEL)
    var i =1
    for i in range(CURRENT_HIGHEST_LEVEL+1):
        if i >0:
            var button = Button.new()
            var button_sprite = Sprite.new()
            button_sprite.texture = load("res://assets/button ("+str(i)+").png")
            button.add_child(button_sprite)
            buttons.add_child(button)
            print(buttons.get_children())
            if i == 1:
                button.set_position(button_init_pos)
            else:
                var prev_button =  buttons.get_child(i -1)
                button.set_position(Vector2(prev_button.get_position().x + 100, button_init_pos.y))



#           print("The level chooser button at : "+str(i)+" has position :"+str(buttons.get_child(i).get_position()))

代替：

<button onClick={this.something} />

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

Answer 2

设置状态后使用此行

this.setState({})

Answer 3

synchronousSlowFunction就像您提到的sync。这意味着，它在运行时会阻塞您的组件。这意味着，该react无法更新您的组件，因为它必须等待回调函数完成才能使用更新后的值调用render。 setTimeout包装使调用异步进行，以便在函数执行工作时react可以呈现/更新您的组件。不是时间延迟才使它起作用，而仅仅是回调，它没有呈现阻塞。您还可以包装在Promise中，或使慢速功能异步以防止渲染阻塞。

Answer 4

尝试这样的事情：

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

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

或尝试使用PureComponent

import React, { PureComponent } from 'react'

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

      </div>
    )
  }
}

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

4 个答案: