我们如何在 ReactJS 渲染中显示 Laravel 验证响应？答案

【问题标题】：How can we show Laravel Validation response in ReactJS render?我们如何在 ReactJS 渲染中显示 Laravel 验证响应？
【发布时间】：2018-05-15 17:46:51
【问题描述】：

我想在 ReactJS 渲染函数中显示 laravel 验证列表。我得到了以下回复。

{"message":"The given data was invalid.","errors":{"phone_number":["The phone number field is required."],"group_id":["The group id field is required."]}}

我不知道如何在 reactJS 渲染中显示如下错误。

@if($errors->has())
  <ul>
   @foreach ($errors->all() as $error)
      <li>{{ $error }}</li>
  @endforeach
 </ul>
@endif

这是我的 axios api 表单句柄函数。

 handleSubmit(e){
    e.preventDefault();
    console.log(this.state);

    if(this.state.action === "add"){
        axios.post('/api/add', this.state).then(response => {

                alert("Data Success inserted")

        }).catch(error => {
            if(error.response.status == 422){
                // alert("Errors...");
                this.setState({
                    errors: error.response.data.errors
                })
            }
        })
    }
  }

【问题讨论】：

{JSON.stringify(this.state.errors)} 将在您的渲染方法中工作。
嗨@ChaseDeAnda，感谢您的回复。它向我展示了对象格式。如何在列表视图中显示？以及如何使用 if 条件。就像如果错误得到然后错误列表将显示。
查看我的答案以将其呈现在列表中

标签： laravel reactjs laravel-5 axios laravel-5.6

【解决方案1】：

您可以使用.map 函数使用Object.keys(this.state.errors) 迭代this.state.errors 中的每个键：

class Errors extends React.Component {
  
  state = {
    errors: {"message":"The given data was invalid.","errors":{"phone_number":["The phone number field is required."],"group_id":["The group id field is required."]}}
  };
  
  renderErrors = () => {
    const { errors } = this.state;
    
    const errorItems = Object.keys(errors.errors).map( (key, i) => {
      const error = errors.errors[key][0];
      return (
        <li>
          {key}:<br/>
          {error}
        </li>
      )
      
    });
    
    return (
      <ul>
        {errorItems}
      </ul>
    )
    
  };

  render () {
    const errors = this.renderErrors();
    return (
      <div>
        {this.state.errors && this.state.errors.message}<br/>
        {errors}
      </div>
    )
  }
}

ReactDOM.render(<Errors />, document.querySelector('#root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

【讨论】：