javascript - react - Reaccionar nativo: this.setState no es una función

this setstate not working

Question

Veo varias preguntas aquí relacionadas con este mismo problema, pero parece que ninguna coincide con el problema que tengo, y es un poco más compleja.

Estoy en el proceso de aprender ReactJS y React Native. Estoy leyendo y siguiendo los ejemplos de código del libro "Learning React Native" aquí: https://github.com/bonniee/learning-react-native

Por alguna razón, llamar a this.setState en el código siguiente cuando se llama a la función handleTextChange, hace que "this.SetState no sea una función". error. Mi pregunta es ¿por qué? A diferencia de otras preguntas sobre este mismo problema, no creo que mi llamada a this.stateState esté oculta en una función de devolución de llamada o en una declaración. ¿Por qué está indefinido?

Aquí está mi código:

class WeatherProject extends Component {
constructor(props) {
super(props);
this.state = {
zip: "",
forecast: null
};
}
_handleTextChange(event) {
this.setState({zip: event.nativeEvent.text});
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
You input {this.state.zip}.
</Text>
<TextInput
style={styles.input}
onSubmitEditing={this._handleTextChange}/>
</View>
);
}
}

Answer 1

Con respecto a la función de flecha, también necesita cambiar la función _handleTextChange (evento). Otras respuestas no hablaron sobre cómo cambiar la función normal a la función de flecha. Proporcionando así una respuesta que puede ayudar a otros.

Necesitas cambiar la función del controlador

desde

_handleTextChange(event) {
this.setState({zip: event.nativeEvent.text});
}

A

_handleTextChange = event => {
this.setState({zip: event.nativeEvent.text});
}

Answer 2

El problema es vinculante al contexto, como se identifica en los otros comentarios y respuestas aquí.

Sin embargo, el rendimiento del enlace en sí no es un problema. El problema más relevante es que usar el enlace o las flechas en sus métodos de renderización crea una nueva función en cada render, lo que resulta en un cambio de accesorios para el niño que los recibe, lo que obliga a volver a renderizar.

Tienes dos opciones viables:

class WeatherProject extends Component {
constructor(props) {
super(props);
this._handleTextChange = this._handleTextChange.bind(this);
}
// ...
}

O puede usar la notación de propiedad de clase y asignar funciones de flecha si está usando el complemento babel para ello.

class WeatherProject extends Component {
constructor(props) {
super(props);
// ...
}
handleTextChange = (event) => {
this.setState({zip: event.nativeEvent.text});
}
// ...
}

Recomiendo encarecidamente que utilice el paquete eslint con las reglas recomendadas de reacción habilitadas. Atrapará errores como el uso de enlazar / flechas en su render, y también le dirá que las funciones de subrayado con prefijo son feas y no son necesarias en React. :)

Answer 3

No utilice el enlace dentro de un render. El enlace es una operación bastante costosa y solo debería ocurrir una vez. Tienes dos opciones:

O bien enlazar la función en el constructor:

this._handleTextChange = this._handleTextChange.bind(this);

o use la función de flecha:

onSubmitEditing={(e) => this._handleTextChange(e)} />

Editar

Aparentemente, las funciones de flecha dentro del render también son una mala práctica (gracias a Adam Terlson en los comentarios y respuestas a continuación). Puedes leer los documentos eslint que dice:

Una llamada de enlace o una función de flecha en un prop JSX creará una nueva función en cada render. Esto es malo para el rendimiento, ya que hará que el recolector de basura sea invocado más de lo necesario.

El uso de las funciones de flecha obviamente no es tan malo como usar el enlace, pero sin embargo debe evitarse.