Question

我有以下代码；

handleBlur = event => {
    const name = event.target.name;
    const value = event.target.value;
    this.setState({
        [name]: value
    }, () => {
        validateInput(this.state, name).then((errors) => {
            this.setState({
                errors: errors
            })
        })
    });
}

在事件触发时，我将用户名/密码设置为组件状态。在回调中，我验证所有字段均符合我的条件，并返回遇到的任何错误。然后，我再次运行setState以将这些错误置于状态。我的问题是，有更好的方法吗？在setState中包含setState似乎根本不可行。

Answer 1

如果用于验证，我认为您应该在回调中使用setState，因为它将使组件多次渲染。

您可以通过将name和errors设置为单个setState来删除回调。

const validateInput = (state, inputName, inputValue) => {
  const errors = { ...state.errors };

  if (/* condition */) {
    errors[inputName] = /* error's value */;
  }

  return errors;
}

handleBlur = event => {
    const name = event.target.name;
    const value = event.target.value;

    this.setState({
        [name]: value,
        errors: validateInput(this.state, name, value),
    });
}

希望对您有帮助！

Answer 2

我认为您不应该在handleBlur中设置值，而应该在handleChange中设置值，并验证和设置handleBlur事件处理程序中的错误（如果有）。仍然，如果需要，您应该在单个setState中设置值和错误，而不要进行两次调用。

Answer 3

您可以使用componentDidUpdate来更新错误

handleBlur = event => {
  const name = event.target.name
  const value = event.target.value
  this.setState({ [name]: value })
}

componentDidUpdate  (prevProps, prevState)  {
  if (prevState[name] !== this.state[name])
   validateInput(this.state, name).then(errors => {
     this.setState({ errors: errors })
   })
}

Answer 4

首先，将验证移出，像这样：

handleBlur = event => {
  const name = event.target.name;
  const value = event.target.value;
  this.setState({ [name]: value });
  validateInput(name, value)
    .then((errors) => this.setState({ errors }));
}

在回调中调用setState接受setState吗？

4 个答案: