Uncaught TypeError: Não é possível ler a propriedade ‘state or props’ de undefined

Então comecei a converter meu aplicativo do ES2015 para o ES6, que usa o React.

Eu tenho uma class de pai e uma class de criança assim,

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 de criança,

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

No entanto, isso causa o seguinte erro,

this.state é indefinido

Isso se refere a,

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

Alguma ideia do que poderia estar causando isso ?

Você pode usar a function de seta para vincular suas funções. Você precisa vincular as funções tanto nos componentes filhos quanto nos pais.

Pai:

 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 ( 
); } }

Criança

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

Existem outras maneiras de ligar as funções também, como a que você está usando, mas você precisa fazer isso para o componente pai também como

ou você pode especificar a binding no construtor como

Pai:

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

Criança

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

Eu concordo com todas as diferentes soluções dadas pelo @Shubham Kathri, exceto binding direta no render.

Você não é recomendado para vincular suas funções diretamente no render. Recomenda-se vinculá-lo no construtor sempre, porque se você fizer a vinculação diretamente na renderização, sempre que seu componente renderizar o Webpack criará uma nova function / object no arquivo empacotado, o tamanho do arquivo do pacote configurável Webpack aumentará. Por muitas razões, seu componente re-renderiza, por exemplo, fazendo setState, mas se você colocá-lo no construtor, ele será chamado apenas uma vez.

A implementação abaixo não é recomendada

   

Faça isso sempre no construtor e use o ref onde for necessário

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

Se você estiver usando o ES6, a vinculação manual não é necessária, mas se você quiser, pode. Você pode usar as funções de seta se quiser evitar problemas relacionados ao escopo e ligações manuais de function / object.

Desculpe se existem erros de digitação estou respondendo no meu celular