如何使用React在窗体上显示验证错误

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

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> 
    ) 
    }

UPDATE

来源

2017-05-07 bp123

你想打印每个'HelpBlock'组件内部的错误吗？ – Chris

是的。因此，如果显示的名字错误在firstName – bp123

下显示错误消息，那么这个错误数组可以包含它自己的错误，但是如果值为'undefined'，则不能显示它？ – Chris

所以，除非我误解你的问题，你只需东东d来映射您的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存在且truthy，但该财产length同样存在。这样可以防止常见错误发生，但是如果由于某种原因errors是一个字符串，则条件也是如此。如果你想要一个更稳固的解决方案，你可以这样做：

{this.state.errors instanceof Array &&

来源

2017-05-07 08:47:34 Chris

我得到'this.state.errors.map不是函数' – bp123

你可以截取'console.log（this.state.errors）'的输出吗？你很可能会这样做，因为'错误'不是一个数组。也许它后来成为一个数组，但不是在初始渲染？ – Chris

@ bp123，检查我上面的更新。虽然我会仔细检查你的'errors'变量是否总是*数组，初始渲染等。 – Chris

如何使用React在窗体上显示验证错误

回答

相关问题