渲染到另一个元素时如何停止handleSubmit更新？

Question

现在尝试一些 React，但偶然发现了一个似乎在任何地方都没有涉及的问题。

我有一个连接到 API 的非常简单的搜索表单。当返回一个无效值时，它会呈现一个带有错误消息的 Header 3 元素，例如：

无效值 xxx 请输入有效的增值税号

简而言之，我似乎无法找到如何停止“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.