javascript - localstorage - Reaccionar con ES7: TypeError no capturado: No se puede leer la propiedad ''estado'' de indefinido

localstorage javascript ejemplos

Question

Esta pregunta ya tiene una respuesta aquí:

• No se puede acceder a la instancia React (this) dentro del controlador de eventos 16 respuestas

Recibo este error Uncught TypeError: No se puede leer la propiedad ''state'' de undefined cada vez que escribo algo en el cuadro de entrada de AuthorForm. Estoy usando React con ES7.

El error se produce en la tercera línea de la función setAuthorState en ManageAuthorPage . Independientemente de esa línea de código, incluso si coloco una console.log (this.state.author) en setAuthorState, se detendrá en console.log y llamará el error.

No puedo encontrar un problema similar para alguien más en internet.

Aquí está el código de ManageAuthorPage :

import React, { Component } from ''react'';
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 

Y aquí está el código de AuthorForm :

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

Answer 1

Debe establecer this para el método setAuthorState

class ManageAuthorPage extends Component {

  state = {
    author: { id: '''', firstName: '''', lastName: '''' }
  };

  constructor(props) {
    super(props);
    this.handleAuthorChange = this.handleAuthorChange.bind(this);
  } 

  handleAuthorChange(event) {
    let {name: fieldName, value} = event.target;

    this.setState({
      [fieldName]: value
    });
  };

  render() {
    return (
      <AuthorForm
        author={this.state.author}
        onChange={this.handleAuthorChange}
      />
    );
  }
}

Otra alternativa basada en la arrow function :

class ManageAuthorPage extends Component {

  state = {
    author: { id: '''', firstName: '''', lastName: '''' }
  };

  handleAuthorChange = (event) => {
    const {name: fieldName, value} = event.target;

    this.setState({
      [fieldName]: value
    });
  };

  render() {
    return (
      <AuthorForm
        author={this.state.author}
        onChange={this.handleAuthorChange}
      />
    );
  }
}

Answer 2

Tienes que enlazar tus controladores de eventos para corregir el contexto ( this ):

onChange={this.setAuthorState.bind(this)}