React：如何在Chrome> Dev Tools中调试为什么浏览器显示的内容与HTML元素不同？

Question

我正在构建一个应用程序。

问题

我在Chrome浏览器中的应用显示的值与Dev Tools中的相应HTML元素不同。这仅在UI上的用户操作对表进行排序后才会发生。似乎浏览器仍然显示表中该行的旧值。

1. 浏览器显示值= 3 < - 不正确
2. HTML元素的值= 41 < - 正确

见下图：

题

我应该采取哪些步骤来诊断可能导致此问题的原因？

例如有什么地方我应该添加特定的日志？或者当某人做出明显错误的事情时，这是一个已知的问题吗？

注意：此请求更多地是关于如何诊断此类问题，而不是查找我的代码的具体错误。

Answer 1

问题出在代码中。我通过试验和错误更改代码找到了原因。

以前，我的组件的渲染看起来像：

 render() {
    return (
      <td className="hoverWrapper">
          <input
            className="wrappedContent"
            type="number"
            onBlur={this.inputChangeHandler}
            value={this.props.value}
          ></input>
          <EditOnhoverbutton />
      </td>
    )
  }

变成：

 render() {
    const showValue = this.props.value ? this.props.value : "";
    return (
      <td className="hoverWrapper">
          <input
            className="wrappedContent"
            type="number"
            onBlur={this.inputChangeHandler}
            value={showValue}
          ></input>
          <EditOnhoverbutton />
      </td>
    )
  }

我怀疑潜在的原因与以下事实有关：对于某些行this.props.value不存在，并且尝试渲染undefined导致渲染失败，并且原始值继续显示。

如果有人能提供更好的评​​估，我将不胜感激。