React update a var 添加两个状态答案

【问题标题】：React update a var adding up two statesReact update a var 添加两个状态
【发布时间】：2020-09-01 21:05:10
【问题描述】：

我需要在变量或状态中打印并保存 globalValue 的值，即两个“数字”的总和。

此代码的问题是，打印在中的不是真正的值，而是倒数第二个。例如，如果我把 Textfields 1 和 1 显示为 0，但如果稍后我将它们更改为 3 和 3，它会显示 2，因为 1 加 1。我不能在 de 中使用 setState componentDidUpdate" 出于这个原因，我使用的是 var，但我确信应该有更好的方法。

感谢您的关注，希望我能从您的回答中学习！

var globalValue=0
class ExampleComponent extends Component{
  constructor(){
  super();
   this.state=({
    number1:0,
    number1:0,
   })
}

componentDidUpdate(){
  globalValue=this.state.valu1+this.state.value2,
}

updateNumber1(evt){
  this.setState({
    value1: evt.target.value,
  });  
}

updateNumber2(evt){
  this.setState({
    value2: evt.target.value,
  });  
}

<Textfield value={this.state.number1} onChange={evt => this.updateNumber1(evt)}/>
<Textfield value={this.state.number2} onChange={evt => this.updateNumber2(evt)}/>
<h2>Global value is:{globalValue}</h2>

【问题讨论】：

为什么还需要globalValue？直接渲染结果即可：<h2>Global value is:{this.state.value1 + this.state.value2}</h2>
除了许多不一致（数字与值、逗号与分号、不完整的组件语法等）之外，存储反应状态外部的任何内容的目的/道具？你真正想做什么？存储可以简单地从存储的状态/道具派生的无关数据是一种反模式。通过从componendDidUpdate 更新globalValue，它将始终成为一个渲染周期在触发它的组件更新之后。
我需要globalValue，因为我需要将它保存在firebase数据库中，另一方面我不需要将它存储在外面，我这样做是因为我想使用函数@ 987654327@，只是因为我不知道更好的方法，如果你知道更好的方法，请通知我！
“我需要 globalValue，因为我需要将它保存在 firebase 数据库中”——不，你真的不需要。当您调用该函数来更新您的 Firebase 时，您仍然可以计算该值。
那么使用它会更好吗？我的意思是直接加起来。 firebase.database().ref(..).push({globalValue:this.state.numer1+this.state.number2,})

标签： javascript reactjs state var

【解决方案1】：

您的代码丢失了很多。完整的工作演示会很有帮助。但是最后 3 行（我认为是 render 方法）应该是一个纯函数，它只访问 this.props 和 this.state 作为输入。不是全局值。计算也应该在那里，而不是在 componentDidUpdate 中。此方法用于其他副作用。

所以只需使用 <h2>Global value is:{this.state.number1 + this.state.number2}</h2>

【讨论】：

问题是我需要将 globalValue 安全到 firebase 数据库，所以我需要整个值