React: Как отладить, почему браузер отображает значение, отличное от HTML-элемента в Chrome> Dev Tools?

Question

Я создаю приложение в реакции.

Проблема

Мое приложение в браузере Chrome показывает значение, отличное от соответствующего элемента HTML в Dev Tools.Это происходит только после действия пользователя в пользовательском интерфейсе для сортировки таблицы.Похоже, что браузер все еще показывает старое значение этой строки в таблице.

1. Браузер показывает значение = 3 <- неверно </li>
2. HTML-элемент имеет значение = 41 <-правильно </li>

См. изображение ниже:

Вопрос

Какие шагия должен предпринять, чтобы диагностировать, что может быть причиной этой проблемы?

например, где-то я должен добавить определенные журналы?или это известная проблема в реакции, когда кто-то делает что-то явно не так?

Примечание: этот запрос больше о том, как диагностировать такую ​​проблему, а не о том, что конкретно неправильно с моим кодом.

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 привела к сбою рендеринга, и исходное значение продолжало отображаться.

Если кто-нибудь может дать лучшую оценку, я был бы признателен.