Question

提交表单后，我正在运行验证并返回一系列错误。我正在使用map将数组分成一组对象，但是，我无法弄清楚如何使用this.state.errors在正确的FormControl字段下显示表单上的错误。这里的任何帮助都会很棒。

What errors look like after array is broken into

Object {name: "name.first", type: "required", value: undefined}
Object {name: "name.last", type: "required", value: undefined}

React component with form

getValidationState() {
      var errors = this.state.errors;

      if (!$.isEmptyObject(errors))
      {
        console.log("sefsefsdf");
        errors.map(element => {
          var errors = element;
        });
      }

      if(errors) return 'error';
    }

    render() {
      return (
        <form onSubmit={this.handleSubmit.bind(this)}>
          <FormGroup
            validationState={this.getValidationState()} >
            <FormControl
              type="text"
              name="firstName"
              value={this.state.firstName}
              placeholder="First name"
              onChange={this.handleChange}
            />
            <FormControl.Feedback />
            {this.state.errors && <HelpBlock>{this.state.errors}</HelpBlock>}

          </FormGroup>
          <FormGroup >
            <FormControl
              type="text"
              name="lastName"
              value={this.state.lastName}
              placeholder="Last name"
              onChange={this.handleChange}
            />
          </FormGroup>
          <FormGroup >
            <Button type="submit">
              Save
            </Button>
          </FormGroup>
        </form>
      )
    }

更新

Answer 1

因此，除非我误解了您的问题，否则您只需要映射errors数组。像这样：

{this.state.errors && 
  <HelpBlock>
    {this.state.errors.map((error, i) => <p key={i}>{error.value}</p>}
  </HelpBlock>
}

这将返回包含错误消息的<p>标记。显然，您可以将元素更改为其他内容。

有关此内容的更多信息，请查看MDN上的Array.map()。

修改：如果errors最初不是数组，您将收到map不是函数的错误。确保将errors数组初始化为数组，而不是其他任何内容。但是，您可以对代码进行额外检查，以确保它是一个数组：

{this.state.errors && this.state.errors.length &&

这不仅仅检查errors是否存在且是否真实，但属性length也存在。这样可以防止常见错误的错误，但是如果errors由于某种原因是字符串，那么条件也是正确的。如果你想要一个更加可靠的解决方案，你可以这样做：

{this.state.errors instanceof Array &&

如何使用React

1 个答案: