Реагировать Проблема: Я пытался установить данные файла в состоянии при загрузке файла, но это не работает - PullRequest
Новая
       11

Реагировать Проблема: Я пытался установить данные файла в состоянии при загрузке файла, но это не работает

0 голосов
/ 13 мая 2019

Во-первых, я не англичанин. Таким образом, мое предложение может быть неверно грамматически или может быть трудно передать значение.

У меня есть проект React с Laravel и Axios. Я хочу загрузить данные изображения на мой сервер. Итак, я попытался установить данные файла в состояние, когда файл загружен, чтобы следовать этому документу , но это не работает.

Я хочу знать причину, по которой это не работает.

Вот мой код. 

import Axios from 'axios';
import React, { Component } from 'react';

class Register extends Component {
  constructor() {
    super();
    this.state = {
      name: '',
      email: '',
      password: '',
      password_confirmation: '',
      profile_picture: null,
      errors: [],
    }

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.hasErrorFor = this.hasErrorFor.bind(this);
    this.renderErrorFor = this.renderErrorFor.bind(this);
  }

  handleChange(event) {
    if(event.target.name.match('profile_picture')) {
      // when input profile picture
      this.setState({
        [event.target.name]: event.target.files[0],
      });

      console.log(event.target.files[0]);
    } else {
      // when input text values
      this.setState({
        [event.target.name]: event.target.value,
      });
    }

    console.log(this.state);
  }

  handleSubmit(event) {
    // submit event
  }

  hasErrorFor(field) {
    // detect error
  }

  renderErrorFor(field) {
    // render error message
  }

  render() {  
    return (
      <div className="container">
        <div className="row justify-content-center">
          <div className="col-md-8">
            <div className="card">
              <div className="card-header">Register</div>
              <div className="card-body">
                <form 
                  action="/api/register"
                  method="post"
                  encType='application/x-www-form-urlencoded'
                  onSubmit={this.handleSubmit}
                >
                  <div className="form-group">
                    // input name
                  </div>

                  <div className="form-group">
                    // input email
                  </div>

                  <div className="form-group">
                    // input password
                  </div>

                  <div className="form-group">
                    // input password confirmation
                  </div>

                  <div className="form-group">
                    <label htmlFor="profile_picture">Profile Picture</label>
                    <input
                      id="profile_picture" 
                      type="file"
                      name="profile_picture"
                      className='form-control-file'                      
                      onChange={this.handleChange}
                    />
                    {this.renderErrorFor('profile_picture')}
                  </div>

                  <button className="btn btn-primary">SUBMIT</button>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Register;

А вот и результат этого кода.

Я, за исключением загруженного файла, устанавливается в состояние при загрузке файла, но файл не устанавливается в состояние.

1 Ответ

1 голос
/ 13 мая 2019

вы написали console.log () сразу после метода setState, так как setState является асинхронным методом, и когда java-скрипт запускает ваш console.log, он будет показывать вам предыдущее состояние, в котором, очевидно, объект изображения не установлен , для этого вы должны поместить консоль во второй аргумент setState, который является функцией обратного вызова. 

this.setState({[event.target.name]: event.target.files[0]},()=>console.log(this.state));
...