React JS状态重置问题：errorText无法恢复至初始状态

嘿，我懂你碰到的这个麻烦——每次提交空白表单，错误信息都在不断重复累加，而不是每次都显示全新的错误提示，对吧？这问题根源很简单：你没在每次表单验证开始前重置errorText的初始状态，导致新错误一直往旧内容后面堆。

下面给你两种简单有效的解决办法：

方法一：验证前重置errorText初始值 #

在处理表单提交的函数最开头，先把errorText重置为初始的"Errors: "，再进行错误判断和追加，这样每次提交都会从干净的初始状态开始：

handleSubmit = (e) => {
  e.preventDefault();
  // 关键步骤：先把errorText重置到初始状态
  let errorText = "Errors: ";
  const { email, password } = this.state;

  // 邮箱验证逻辑
  if (!email || !/\S+@\S+\.\S+/.test(email)) {
    errorText += "Email is invalid. ";
  }
  // 密码验证逻辑
  if (!password || password.length < 6) {
    errorText += "Password is invalid. ";
  }

  // 根据验证结果更新状态或执行登录
  if (errorText !== "Errors: ") {
    this.setState({ errorText });
  } else {
    // 验证通过，执行登录逻辑
    // ...
  }
};

方法二：用数组收集错误再拼接（更清晰） #

换一种思路，用数组来收集所有错误信息，最后再统一拼接成字符串，完全避免追加重复的问题：

handleSubmit = (e) => {
  e.preventDefault();
  // 初始化空数组存错误
  const errors = [];
  const { email, password } = this.state;

  if (!email || !/\S+@\S+\.\S+/.test(email)) {
    errors.push("Email is invalid");
  }
  if (!password || password.length < 6) {
    errors.push("Password is invalid");
  }

  if (errors.length > 0) {
    // 把数组转成需要的错误文本格式
    this.setState({ errorText: `Errors: ${errors.join(". ")}.` });
  } else {
    // 验证通过，执行后续逻辑
    // ...
  }
};

这样不管你提交多少次表单，每次都会生成全新的错误提示，再也不会出现重复累加的情况啦～

内容的提问来源于stack exchange，提问作者Shh