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

Question

I am building an app in react.

Problem

My app in Chrome browser is showing a different value than the corresponding HTML element in Dev Tools. This only occurs after a user action on the UI to sort the table. It seems the browser is still showing the old value for that row in the table.

1. Browser showing value = 3 <-- incorrect
2. HTML element has value = 41 <-- correct

See image below:

Question

What steps should I take to diagnose what may be causing this issue?

eg is there somewhere I should add specific logs? or is this a known issue in react when someone is doing something clearly wrong?

Note: This request is more about the how to diagnose such an issue, rather than finding what is specifically wrong with my code.

Answer 1

The problem was in the code it seems. I found the cause through trial and error changing the code.

Previously , the render for my component looked like:

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

Changed to:

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

I suspect the underlying cause was related to the fact that for some rows this.props.value did not exist, and trying to render undefined caused the render to fail, and the original value continued to display.

If anyone can provide a better assessment, I would be grateful.