减法时在reactJS中获取未定义的值答案

【问题标题】：Getting undefined value in reactJS when substracting减法时在reactJS中获取未定义的值
【发布时间】：2021-05-31 05:33:19
【问题描述】：

我试图获取用户开始输入到他提交文本的时间间隔。当他点击文本区域时，计时器启动并以秒为单位计算（小时 * 3600 + 分钟 * 60 + 秒）。当他点击提交时，计时器结束也是如此。

现在我的问题是，当我尝试减去保存在 this.state 中的两个值时，即使我先将它们存储在 var 中或者如果我执行 this.setState()，我仍然会得到“未定义”。

    overallTime(e){
        this.setState({Time: this.state.StartTime - this.state.EndTime})
        console.log(this.state.Time)
    }

    onSubmit = (e) => {
        this.overallTime();
        var textinput = this.state.inputValue;
        var inputLength = textinput.length;
        var inputTime = this.state.Time;
        if(textinput === this.state.Content)
        {
            console.log(inputLength)
            var lps = inputLength / inputTime;
            this.setState({LettersPerSecond: lps})
            console.log(lps)
            this.setState({message: 'Your score is ' + this.state.LettersPerSecond + ' letters per second! Good job! Refresh the page for another try!'})
        }
        else
        {
            this.setState({message: 'Your input is incorrect, refresh the page and start again! Remember, you always learn from your failures, so never give up!'})
        }
    }

【问题讨论】：

你在 setState 中调用 setState，这似乎不对
我在看到另一篇关于 SO 的帖子后尝试这样做，但没有奏效。忘了改回来，现在我编辑了帖子。谢谢
你绑定overallTime到组件了吗？
是的。我需要将其称为this.overallTime 而不是this.overallTime() 吗？
你能分享剩下的代码或codeandbox吗？

标签： javascript reactjs

【解决方案1】：

我建议这样重组：

overallTime() {
  return this.state.EndTime - this.state.StartTime;
}

onSubmit = (e) => {
  const totalTime = this.overallTime();

  const textinput = this.state.inputValue;
  const inputLength = textinput.length;
  
  if (textinput === this.state.Content) {
    const lps = inputLength / totalTime;

    this.setState({
      LettersPerSecond: lps,
      message: 'Your score is ' + lps + ' letters per second! Good job! Refresh the page for another try!'
    });
  } else {
    this.setState({
      message: 'Your input is incorrect, refresh the page and start again! Remember, you always learn from your failures, so never give up!'
    })
  }
}

为什么？

setState({Time: someValue});
// this.state.Time doesn't have the new value yet at this point

见——State updates may be asynchronous。

还有一个小的逻辑错误——你需要做endTime - startTime，而不是startTime - endTime。

您的 overallTime 函数不完全正确 - 我认为您的意思是这样的：

overallTime() {
  this.setState((state) => ({
    Time: state.EndTime - state.StartTime
  });
}

我强烈建议阅读 React 文档的 State and Lifecycle 部分——它写得非常好。

【讨论】：

感谢您的教程。是的，结束时间已确定。 op上的cmets中有一个codesandbox链接。我现在正在使用您提供的代码，但我仍然得到 lps 的 NaN 值
codesandbox.io/s/mystifying-payne-8c136?file=/src/App.js 这是更新后的代码，我使用了你的 sn-p。
您看到 NaN 是因为我的 overallTime 函数中有错字——它写的是 startTime 而不是 StartTime。此外，在看到您的代码框后，我的 sn-p 不能 100% 适合您的代码，您需要进行一些调整以使其正常工作。但它很接近！你可以的！
是的！现在它适用于StartTime！仍然返回值 1.06e-10，但它正在某个地方！谢谢！
你得到了那个奇怪的数字，因为最初我假设你正在使用UNIX timestamps 计算时间。（我建议这样做——也许是最常见的方法，而且比从小时、分钟、秒计算更简单）。我编辑了 sn-p 以反映您的代码。

【解决方案2】：

您可以使用 setState 函数的回调函数。您将始终在回调函数中获得更新的状态。

例如：

overallTime(e){
    this.setState({Time: this.state.StartTime - this.state.EndTime}, 
     () => console.log(this.state.Time))  
}

【讨论】：