Как остановить обновление handleSubmit при отображении в другой элемент?

Question

Теперь попробуем немного React и наткнулся на проблему, которая, кажется, нигде не освещена.

У меня есть очень простая форма поиска, которая подключается к API. Когда возвращается неверное значение, он отображает элемент заголовка 3 с сообщением об ошибке, например:

Неверное значение ххх Пожалуйста, введите действительный номер НДС

Проблема в двух словах, я не могу найти, как остановить повторный рендеринг "xxx". Перед отправкой нового запроса, каждый раз, когда я начинаю вводить или удалять текст из поля, из которого он был получен, обновляется «недопустимое значение xxx», но я хочу, чтобы он остановился

Везде, где я пытался найти какие-либо подсказки или идеи, такие случаи нигде не описаны в документации (или, может быть, я не знаю, где искать). Чистящий интернет также не дал результатов.

Очень простое удаление handleChange и перемещение this.setState в handleSubmit по какой-то странной причине не сработало.

     handleChange(event) {
      this.setState({ value: event.target.value });
    }

      <form onSubmit={this.handleSubmit}>
        <label style={Style}>Search VAT:</label>
        <input type="text" style={Style} />
        <input type="submit" value="Submit" />
      </form>

   <h3>
          Invalid value {` `} {this.state.value}
          <br /> <br />
          Please enter valid VAT Number
   </h3>

Answer 1

Вы должны отделить ваше неверное значение от вашего state.value.

Так что, если ваш вызов API возвращает ошибку, в этот момент скопируйте текущий state.value в новую переменную состояния, такую ​​как state.errorValue. Это то, что вы должны использовать для отображения вашего сообщения об ошибке:

<h3>
      Invalid value {this.state.errorValue}
      <br /> <br />
      Please enter valid VAT Number
</h3>

После того, как пользователь начнет вводить снова или после успешного ввода в API (в зависимости от того, что подходит), очистите ваш state.errorValue.