第一次点击时反应状态值没有更新

Posted 2023-02-25

【中文标题】第一次点击时反应状态值没有更新

【英文标题】：React State value not updaing on click for first time

【发布时间】：2018-06-07 08:51:58

【问题描述】：

我的输入标签带有id="Table" 和状态动态表。

 this.state = 
      dynamictable: ""
   
 <input type="text" className="form-control box_ip" placeholder="Table" 
  id="Table"   value=this.state.dynamictable/>

我有一个按钮next，点击按钮我正在调用一个函数updateEditorData()

updateEditorData() 

  this.setState(
        dynamictable: "Hello"
    );

this.table.forEach((id) => 
       let element = document.getElementById(id);
        if (element != undefined) 
            if (element.value != undefined && element.value != '') 
            this.replaceText(id, element.value);



            
        
    )

第一次点击next this.replaceText() 没有被调用，因为 element.value 是 "" 但对于第二种类型 element.value 即将到来 "hello" 但为什么是第一次呢没有调用那个函数，动态表的初始状态是""?

我只需要第一次调用this.replaceText()，这意味着第一次点击next button我需要将空字符串的状态更新为“hello”

提前致谢。请指导我。

【问题讨论】：

this.setState() doc quote: "setState() 并不总是立即更新组件。它可能会批量更新或推迟更新。"该文档还包含您的问题的解决方案。

有什么原因，你没有使用 render 方法来用正确的更新数据渲染你的表格吗？

【参考方案1】：

setState 异步工作，所以在调用它之后，this.state 可能会保持不变。但是，在文档中，setState 有一个可选的第二个参数，称为 callback，一旦状态更新，它就会被调用：

this.setState(dynamictable: "Hello", () => 
  this.table.forEach(...)

【参考方案2】：

this.setState() 在反应中是异步的。当你打电话时是什么意思 this.setState(dynamictable: "Hello"); 它不是中间的。 因此，如果您在执行 setState 之后使用该状态，它可能还不会更新。