Reagir com o ES7: TypeError não capturado: Não é possível ler a propriedade 'state' de undefined [duplicate]
Esta pergunta já tem uma resposta aqui:
Não foi possível acessar a instância React (this) dentro do manipulador de eventos 16 respostasEstou recebendo este erroTypeError não capturado: não é possível ler a propriedade 'state' de undefined sempre que digito alguma coisa na caixa de entrada do AuthorForm. Estou usando o React com o ES7.
O erro ocorre emTerceira linha da função setAuthorState em ManageAuthorPage. Independentemente dessa linha de código, mesmo que eu coloque um console.log (this.state.author) em setAuthorState, ele irá parar no console.log e chamar o erro.
Não foi possível encontrar um problema semelhante para outra pessoa pela internet.
Aqui está oManageAuthorPage código:
import React, { Component } from 're,act';
import AuthorForm from './authorForm';
class ManageAuthorPage extends Component {
state = {
author: { id: '', firstName: '', lastName: '' }
};
setAuthorState(event) {
let field = event.target.name;
let value = event.target.value;
this.state.author[field] = value;
return this.setState({author: this.state.author});
};
render() {
return (
<AuthorForm
author={this.state.author}
onChange={this.setAuthorState}
/>
);
}
}
export default ManageAuthorPage
E aqui está oAuthorForm código:
import React, { Component } from 'react';
class AuthorForm extends Component {
render() {
return (
<form>
<h1>Manage Author</h1>
<label htmlFor="firstName">First Name</label>
<input type="text"
name="firstName"
className="form-control"
placeholder="First Name"
ref="firstName"
onChange={this.props.onChange}
value={this.props.author.firstName}
/>
<br />
<label htmlFor="lastName">Last Name</label>
<input type="text"
name="lastName"
className="form-control"
placeholder="Last Name"
ref="lastName"
onChange={this.props.onChange}
value={this.props.author.lastName}
/>
<input type="submit" value="Save" className="btn btn-default" />
</form>
);
}
}
export default AuthorForm