反应：如何调试为什么浏览器显示的值与Chrome中的HTML元素不同>；开发工具？

我正在react中构建一个应用程序

问题

Chrome浏览器中的“我的应用”显示的值与开发工具中相应的HTML元素的值不同。这仅在用户对UI执行排序表的操作后发生。浏览器似乎仍在显示表中该行的旧值

---

显示值为3的浏览器问题似乎出在代码中。我通过反复修改代码找到了原因

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

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

render（）{
返回(
)
}

更改为：

 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>
    )
  }

render（）{
const showValue=this.props.value？this.props.value:；
返回(
)
}

我怀疑根本原因与以下事实有关：对于某些行，

this.props.value

不存在，并且尝试渲染

未定义的

导致渲染失败，原始值继续显示

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

value属性只是每个DOM/HTML规范输入的默认值。当实际值由于用户输入或其他原因发生更改时，不需要更改属性。