如何使用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在窗體上顯示驗證錯誤

回答

相關問題