javascript - React - 还有另一种方法来处理更新的状态，而不是将所有函数硬编码在 setState 方法的回调部分中？

Question

我正在 React 中工作，我尝试在某些函数中处理新状态。

但这没有用:

• 我的代码无法更新该值，
• 更新状态有些晚，而不是立即更新
• 回调部分中调用的函数将 null 作为参数传递，而不是 e

经过一番尝试，我对所有功能进行了硬编码。

所以我在回调区域中硬编码了所有代码。现在效果很好。但我仍然想知道如何以更精细的方式处理新状态，而不是在回调部分中硬编码所有函数。

这是我的handleChange函数:

handleChange = (e) => {
  e.preventDefault();
  console.log("state in checkForm: ", this.state);

  if (e.target.name === "email") {
    let emailValue = e.target.value.trim()
    if (
      typeof(emailValue) === 'string' &&
      emailValue.length >= 1 &&
      validator.isEmail(emailValue)
    ) {
      this.setState({
          [e.target.name]: Object.assign({},
            this.state[e.target.name], {
              validation: true
            }, {
              value: e.target.value
            })
        },
        () => {
          let validatePassword = this.state.password.validation;
          let validateEmail = this.state.email.validation;
          if (validateEmail && validatePassword) {
            this.setState({
              validateForm: true,
              nameSubmit: "onSubmit"
            });
            console.log("state email: ", this.state)
          }
        }
      );
    } else {
      this.setState({
        [e.target.name]: Object.assign({},
          this.state[e.target.name], {
            validation: false
          })
      });
      this.setState({
        nameSubmit: "offSubmit",
        validateForm: false
      });
    }
  }

  if (e.target.name === "password") {
    let regexCheck = RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}");
    let password = e.target.value.trim()
    if (
      typeof(password) === 'string' &&
      password.length >= 1 &&
      regexCheck.test(password)
    ) {
      this.setState({
          [e.target.name]: Object.assign({},
            this.state[e.target.name], {
              validation: true
            }, {
              value: e.target.value
            })
        },
        () => {
          let validatePassword = this.state.password.validation;
          let validateEmail = this.state.email.validation;
          if (validateEmail && validatePassword) {
            this.setState({
              validateForm: true,
              nameSubmit: "onSubmit"
            });
            console.log("state password : ", this.state)
          }
        }
      );
    } else {
      this.setState({
        [e.target.name]: Object.assign({},
          this.state[e.target.name], {
            validation: false
          })
      });
      this.setState({
        nameSubmit: "offSubmit",
        validateForm: false
      });
    }
  }
}

正如您所看到的，所有代码都直接硬编码在 setState 回调部分中。我想知道如何创建一种更灵活的方式来进行回调，

任何提示都会很棒，谢谢。

Answer 1

所以我不知道你的意思，但我明白你想用另一个小函数来破坏你的主要函数，对吧？如果这对您没有帮助，请将完整的代码放在这里以便更好地分析。

代码

  // Validations
  isValidEmail = (emailValue) => {
    return typeof emailValue === 'string' &&
           emailValue.length >= 1 &&
           validator.isEmail(emailValue);
  }

  isValidPassword = (password) => {
    const pattern = RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}");
    return typeof password === 'string' &&
           password.length >= 1 &&
           pattern.test(password);
  }

  // updates
  updateEmail = (name, email) => {
    if (isValidEmail(email)) {
      this.setState({
        [e.target.name]: {
          ...this.state[e.target.name],
          validation: true,
          value: e.target.value
        }
      },
        () => {
          let validatePassword = this.state.password.validation;
          let validateEmail = this.state.email.validation;

          if(validateEmail && validatePassword) {
            this.setState({validateForm: true,
                          nameSubmit:"onSubmit"});
            console.log("state email: ", this.state)
          }
        }
      );

      return;
    }

    this.setState({
      [e.target.name]: {
        ...this.state[name],
        validation: false,
      },
      nameSubmit:"offSubmit",
      validateForm: false
    });
  }

  updatePassword = (name, password) => {
    if (this.isValidPassword(password)) {
      this.setState({
        [e.target.name]: {
          ...this.state[name],
          validaition: true,
          value,
        }
      },
      () => {
        let validatePassword = this.state.password.validation;
        let validateEmail = this.state.email.validation;
        if(validateEmail && validatePassword) {
          this.setState({validateForm: true, nameSubmit:"onSubmit"});
          console.log("state password : ", this.state);
        }
      });

      return;
    }

    this.setState({
      [e.target.name]: {
        ...this.state[name],
        validaition: false,
      },
      nameSubmit:"offSubmit",
      validateForm: false
    });
  }

  // main fuction
  handleChange = (e) => {
    e.preventDefault();
    const { name, value } = e.target;

    if (name === "email" ) this.updateEmail(name, value.trim())
    if (name === "password") this.updatePassword(name, value.trim())
  }

因此，首先，我将验证硬代码重构为一个名为 isValidEmail 和 isValidPassword 的函数。

之后，我将每个 if 的 handleChange 内容提取到一个名为 updatedEmail 和 updatePassword 的新方法> 传递您当前的名称和值。

我在 if 中使用 return 来避免 else (这是我推荐的最佳实践)。另一件事，我使用 spread 而不是 Object.assign，更好看(我也推荐)

最后我只是调用了传递所需内容的方法(名称和值)；

希望对你有帮助;)