如何在 Laravel 刀片中的反应组件中获取 Laravel 验证错误

Question

我是 React 的新手。我在 Laravel 刀片中部分使用了反应表单组件。那么如何将验证错误消息从控制器发送到驻留在 Laravel 刀片文件中的反应组件。

在我的控制器中，

public function store(Request $request)
{
    $rules = [
      'name' => 'required',
      'publish_at' => 'required|datetime'
    ];

    $this->validate($request, $rules);

    $book = Book::create([
        'name' => $request->name,
        'publish_at' => $request->publish_at
    ]);

    return response()->json($book);
}

在我的 Laravel 刀片中，

 <form method="POST" action="patients">
     @csrf
     <div class="form-group">
         <label for="name">Name</label>
         <input type="text" name="name" class="form-control" placeholder=". . .">
         @error('name')
         <span class="text-danger">{{ $message }}</span>
         @enderror
     </div>

     <div id="publish_at"></div> <!-- this is react component -->

     <button type="submit">Submit</button>
</form>

Answer 1

根据 Laravel 文档，他们在验证失败时发送带有 422 代码的响应：

如果传入请求是 AJAX 请求，则不会生成重定向。相反，带有 422 状态代码的 HTTP 响应将返回到浏览器，其中包含验证错误的 JSON 表示形式

*So, you just need to handle response and, if validation failed, add a
validation message to the state, something like in the following code
snippet*


  request = $.ajax({ 
              url: "/user", 
              type: "post", 
              data: 'email=' + email + '&_token={{ csrf_token() }}',
              data: {'email': email, '_token': $('meta[name=_token]').attr('content')},
              beforeSend: function(data){console.log(data);},
              error: function(jqXhr, json, errorThrown) {
                if(jqXhr.status === 422) {
                    //status means that this is a validation error, now we need to get messages from JSON
                    var errors = jqXhr.responseJSON;
                    var theMessageFromRequest = errors['email'].join('. ');
                    this.setState({
                        validationErrorMessage: theMessageFromRequest,
                        submitted: false
                    });
                }
              }.bind(this)
        });

之后，在“渲染”方法中，只需检查是否this.state.validationErrorMessage已设置并将消息渲染到某处：

render: function() {
    var text = this.state.submitted ? 'Thank you!  Expect a follow up at '+email+' soon!' : 'Enter your email to request early access:';
    var style = this.state.submitted ? {"backgroundColor": "rgba(26, 188, 156, 0.4)"} : {};
    return (
      <div>
        {this.state.submitted ? null :
            <div className="overall-input">
              <ReactCSSTransitionGroup transitionName="example" transitionAppear={true}>
                  <input type="email" className="input_field" onChange={this._updateInputValue} ref="email" value={this.state.email} />
                  <div className="validation-message">{this.state.validationErrorMessage}</div>
                  <div className="button-row">
                      <a href="#" className="button" onClick={this.saveAndContinue}>Request Invite</a>
                  </div> 
              </ReactCSSTransitionGroup>
            </div>                            
        }
      </div>
    )
  }