Невозможно прочитать свойство _resetForm из неопределенного - PullRequest
Новая
       3

Невозможно прочитать свойство _resetForm из неопределенного

0 голосов
/ 04 марта 2020

Я новичок в React, и у меня возникла проблема с этим.

У меня есть форма, которая должна выполнить http-запрос для сохранения формы. Каждый раз, когда вы нажимаете кнопку отправки, приложение должно вызывать метод _resetForm () и вызывать сервис, но ничего такого не делает. Я получаю эту ошибку, когда комментирую «this.produtoService.salvar (this.state)»: «Невозможно прочитать свойство« _resetForm »из неопределенного», и я получаю эту ошибку, когда комментирую «this._resetForm ()»: «Не могу прочитать свойство 'produtoService' не определено '. Когда я комментирую оба, я не получаю ошибок. 

const initialState = {
    nome: '',
    sku: '',
    descricao: '',
    preco: 0,
    fornecedor: ''
}

export default class CadastroProduto extends React.Component {

    constructor() {
        super();
        this.nameInput = React.createRef();
        this.produtoService = new ProdutoService();
    }

    state = initialState;

    onChange(event) {
        this.setState({
            [event.target.name]: event.target.value
        })
    }

    _resetForm = () => {
        this.setState(initialState);
        this.nameInput.current.focus();
    }

    onSubmit(event) {
        event.preventDefault();
        this._resetForm();
        this.produtoService.salvar(this.state);
    }

    render() {
        return (
            <div className="card">
                <div className="card-header">Cadastro de Produtos</div>
                <div className="card-body">
                    <form onSubmit={this.onSubmit}>
                        <div className='row'>
                            <div className='col-md-6'>
                                <label>Nome:</label>
                                <input type='text' className='form-control' name='nome' ref={this.nameInput} value={this.state.nome} onChange={event => this.onChange(event)} autoFocus></input>
                            </div>
                            <div className='col-md-6'>
                                <label>SKU:</label>
                                <input type='text' className='form-control' name='sku' value={this.state.sku} onChange={event => this.onChange(event)}></input>
                            </div>
                        </div>
                        <div className='row'>
                            <div className='col-md-12'>
                                <label>Descrição:</label>
                                <textarea className='form-control' name='descricao' value={this.state.descricao} onChange={event => this.onChange(event)}></textarea>
                            </div>
                        </div>
                        <div className='row'>
                            <div className='col-md-6'>
                                <label>Preço:</label>
                                <input type='text' className='form-control' name='preco' value={this.state.preco} onChange={event => this.onChange(event)}></input>
                            </div>
                            <div className='col-md-6'>
                                <label>Fornecedor:</label>
                                <input type='text' className='form-control' name='fornecedor' value={this.state.fornecedor} onChange={event => this.onChange(event)}></input>
                            </div>
                        </div>
                        <div className='row'>
                            <div className='col-md-1'>
                                <button className='btn btn-primary' type='reset' onClick={this._resetForm}>Limpar</button>
                            </div>
                            <div className='col-md-1'>
                                <button className='btn btn-success' type='submit'>Salvar</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        )
    }
}

export default class ProdutoService {

    constructor() { }

    async salvar(produto) {
        AXIOS.defaults.headers.common = {}
        await AXIOS.post('http://localhost:3000/produtos', produto)
            .then(response => response)
            .catch(error => console.log(error))
            .finally()
    }
}

Я был бы рад, если бы вы мне помогли

1 Ответ

1 голос
/ 04 марта 2020

Измените ваше onSubmit событие на следующее. 

 onSubmit= (event) => {
        event.preventDefault();
        this._resetForm();
        this.produtoService.salvar(this.state);
  }

Альтернативный подход - связать this в вашем конструкторе. 

   constructor() {
        // ... Your code here
        this.onSubmit = this.onSubmit.bind(this);
    }

Причина, по которой ваш текущий Настройка не работает, потому что ключевое слово this используется только для функции onSubmit.

Использование функции со стрелкой или связывание ключевого слова this с onSubmit позволило бы функции использовать this класса.

...