React Native: this.setState non è una funzione

Question

Vedo un numero di domande su questo stesso problema, ma sembra che nessuno corrisponda al problema che sto avendo e sia un po 'più complesso.

Sono in procinto di apprendere ReactJS e React Native. Sono nel bel mezzo della lettura e seguendo gli esempi di codice del libro "Learning React Native" qui: https://github.com/bonniee/learning-react-native

Per qualche motivo, chiamare this.setState nel codice seguente quando viene chiamata la funzione handleTextChange, causa "questo .SetState non è una funzione. " errore. La mia domanda è perché? A differenza di altre domande su questo stesso problema, non credo che la mia chiamata a this.StateState sia sepolta in una funzione di callback o in una dichiarazione. Perché è indefinito?

Ecco il mio codice:

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

Non utilizzare legano all'interno di un rendering. legare è un'operazione piuttosto costosa e dovrebbe accadere solo una volta. avete due opzioni:

sia legano la funzione nel costruttore:

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

o utilizzare la funzione freccia:

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

Modifica

Apparentemente freccia funzioni all'interno rendono è anche una cattiva pratica (da Thx a Adam Terlson nei commenti e risposta sotto). È possibile leggere eslint docs che indica:

Una chiamata di bind o una funzione di freccia in un puntello JSX creerà una nuova funzione su ogni singolo rendering. Ciò non è positivo per le prestazioni, poiché il garbage collector viene richiamato molto più del necessario.

Utilizzare le funzioni di freccia non è ovviamente così grave come utilizzare il binding, ma deve essere evitato.

Answer 2

Il problema è legato al contesto, come identificato negli altri commenti e nelle risposte qui.

Tuttavia, le prestazioni del bind stesso non sono un problema. La questione più rilevante è che l'uso del binding o delle frecce nei metodi di rendering crea una nuova funzione su ogni rendering, determinando una modifica degli oggetti di scena per il bambino che li riceve, forzando un nuovo rendering.

Hai due opzioni praticabili:

class WeatherProject extends Component { 
    constructor(props) { 
    super(props); 

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

Oppure si può usare la notazione di classe e assegnare le funzioni di direzione se si sta utilizzando il babel plugin per esso.

class WeatherProject extends Component { 
    constructor(props) { 
    super(props); 
    // ... 
    } 

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

vi consiglio caldamente di utilizzare il pacchetto eslint con il react recommended rules abilitato. Cattura errori come l'uso di bind/frecce nel rendering, oltre a dirti che le funzioni di prefisso sottolineatura sono brutte e totalmente non necessarie in React. :)