Uncaught TypeError: imansible leggere la proprietà ‘state or props’ di undefined

Così ho iniziato a convertire la mia applicazione da ES2015 a ES6 che utilizza React.

Ho una class genitore e una class figlia come questa,

export default class Parent extends Component { constructor(props) { super(props); this.state = { code: '' }; } setCodeChange(newCode) { this.setState({code: newCode}); } login() { if (this.state.code == "") { // Some functionality } } render() { return ( 
); } }

Classe bambino,

 export default class Child extends Component { constructor(props) { super(props); } handleCodeChange(e) { this.props.onCodeChange(e.target.value); } login() { this.props.onLogin(); } render() { return ( 

Tuttavia questo causa il seguente errore,

questo stato non è definito

Si riferisce a,

 if (this.state.code == "") { // Some functionality } 

Qualche idea di cosa potrebbe causare questo ?

Puoi usare la funzione freccia per associare le tue funzioni. Devi bind le tue funzioni sia ai bambini che ai componenti principali.

Genitore:

 export default class Parent extends Component { constructor(props) { super(props); this.state = { code: '' }; } setCodeChange = (newCode) => { this.setState({code: newCode}); } login = () => { if (this.state.code == "") { // Some functionality } } render() { return ( 
); } }

Bambino

 export default class Child extends Component { constructor(props) { super(props); } handleCodeChange = (e) => { this.props.onCodeChange(e.target.value); } login = () => { this.props.onLogin(); } render() { return ( 

Esistono altri modi per associare le funzioni come quella che si sta utilizzando, ma è necessario farlo anche per il componente padre come

oppure puoi specificare l’associazione nel costruttore come

Genitore:

 constructor(props) { super(props); this.state = { code: '' }; this.setCodeChange = this.setCodeChange.bind(this); this.login = this.login.bind(this); } 

Bambino

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

Sono d’accordo con tutte le diverse soluzioni fornite da @Shubham Kathri eccetto il binding diretto in render.

Non è consigliabile associare le proprie funzioni direttamente al rendering. Si consiglia di associarlo al costruttore sempre perché se si esegue il binding direttamente nel rendering, ogni volta che il componente esegue il rendering, Webpack creerà una nuova funzione / object nel file in bundle, quindi le dimensioni del file del pacchetto Webpack aumenteranno. Per molti motivi, il tuo componente esegue nuovamente il rendering ad esempio: facendo setState ma se lo inserisci nel costruttore viene chiamato chiamato una sola volta.

L’implementazione di seguito non è raccomandata

   

Fallo sempre nel costruttore e usa la ref dove richiesto

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

Se si utilizza ES6, non è necessario il binding manuale, ma se lo si desidera è ansible. È ansible utilizzare le funzioni di freccia se si desidera evitare problemi relativi all’ambito e collegamenti manuali di funzioni / oggetti.

Scusa se ci sono errori di battitura che sto rispondendo sul mio cellulare