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

Question

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

问题

我的应用程序在 Chrome 浏览器中显示的值与开发工具中相应的 HTML 元素不同。这仅发生在用户对 UI 进行排序以对 table 进行排序之后。浏览器似乎仍在 table.

中显示该行的旧值

浏览器显示值 = 3 <-- 不正确
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 导致渲染失败，并继续显示原始值.

如果谁能提供更好的评价，我将不胜感激。

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

React: How to debug why browser showing different value than HTML element in Chrome > Dev Tools?

html

google-chrome-devtools

reactjs