Как мы можем показать ответ проверки Laravel в рендере ReactJS? - PullRequest
Новая
       9

Как мы можем показать ответ проверки Laravel в рендере ReactJS?

0 голосов
/ 15 мая 2018

Я хочу отобразить список проверки верности в функции рендора ReactJS. Я получил ответ ниже. 

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

Я не знаю, как отобразить ошибки, как показано ниже в Rendor ReJJ. 

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

1 Ответ

0 голосов
/ 15 мая 2018

Вы можете использовать функцию .map для итерации по каждой клавише в this.state.errors, используя Object.keys(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>
...