React – TypeError: no se puede leer la propiedad ‘props’ de indefinido

Entiende el código bien antes de aplicarlo a tu trabajo y si tdeseas aportar algo puedes dejarlo en la sección de comentarios.

Solución:

TLDR: El problema específico en su bacalao se indica en el párrafo cerca del final de esta respuesta.

Este es un problema clásico con JavaScript thisle sugiero que lea un poco si aún no lo ha hecho.

Para decirlo en términos breves y más simples (no solo para usted, sino si alguien más está leyendo esto), una definición de función de JavaScript (si no está escrita como una función de flecha) redefine lo que this es, es decir, a lo que apunta. Así que cuando defines:

handleDelete() 
     this.props.onDelete(this.props.char);

esa función es this no apunta a la instancia de objeto de la clase en la que está definida. Esto es un poco contrario a la intuición si proviene de un entorno C++/C#/Java. La cosa es que this salió mucho antes de que las clases entraran en JavaScript y las clases están notando más que un azúcar de sintaxis para una función con un montón de prototipos definidos (ver aquí), o en otras palabras, no vincula esto a sus funciones de forma predeterminada.

Hay un par de formas típicas de evitar esto:

Unir this a todas las funciones (en el constructor)

class Character extends Component 
    constructor(props) 
        super(props)
        this.handleDelete = this.handleDelete.bind(this)
    
    render() 
        // ...
    ;

    handleDelete() 
        this.props.onDelete(this.props.char);
    

NOTA: En lugar de esto puedes atar this en cada uso de la función (es decir onClick=this.handleDelete.bind(this)pero es No recomendable porque hará que su código sea propenso a errores si alguna vez olvida enlazar this. Además, si está encadenando funciones, es posible que apunte a algo incorrecto en alguna parte. Sin mencionar que bind es una función, y en React harás una llamada de función en cada renderizado. Sin embargo, es bueno tener en cuenta si alguna vez tienes una situación en la que tienes que cambiar this.

Usar funciones de flecha

class Character extends Component 
    render() 
        // ...
    ;

    handleDelete = () => 
        this.props.onDelete(this.props.char);
    

Como se indicó anteriormente, y en las otras respuestas, las funciones de flecha no redefinen el this puntero. Lo que está haciendo efectivamente aquí es asignar la función de flecha a un atributo de la instancia de objeto de esta clase. En otras palabras, la función (siendo una función de flecha que no redefine this) toma el this desde el ámbito externo (el ámbito de la clase); sin embargo, debido a que las funciones de flecha son funciones anónimas, se le asigna un nombre asignándola a una propiedad de nombre.

Todas las demás soluciones son algunas variaciones de las dos anteriores.

---

En cuanto a su solución

Ambas cosas onDelete y handleDelete sufrir de esto this asunto.

Además, como @Alyson Maia ha dicho anteriormente, su Character componente se puede escribir como un componente funcional:

const Character = (props) => 
    render() 
        return (
           

                

                    this.props.char
                     x 
                
           
        )
    ;

Reescribes el contexto del método de clase cuando lo pasas a accesorios como este debido al sistema JS OOP. Entonces, para que funcione, hay varios enfoques:

1) Esto no es tan bueno porque bind siempre devuelve una nueva función y su componente se volverá a procesar incluso si no hay actualizaciones en los accesorios.

import React,  Component  from 'react';
import './App.css';

class App extends Component 
    render() 
        return (
            

                
            
        );
    


class StreetFighter extends Component 
    constructor(props) 
        super(props);
        this.state = 
            characters: [
                'Chun-Li',
                'Guile',
                'Ryu',
                'Ken',
                'E.Honda',
                'Dhalsim',
            ],
        ;
    
    render() 
        let characters = this.state.characters;
        characters = characters.map((char, index) => 
            return (
                
            );
        );
        return (
            

                
Street Fighter Characters
                
characters
            
        );
    
    onDelete(chosenCharacter) 
        let updatedCharactersList = this.state.characters.filter(
            (char, index) => 
                return chosenCharacter !== char;
            
        );

        this.setState(
            characters: updatedCharactersList,
        );
    


class Character extends Component 
    render() 
        return (
            

                

                    this.props.char
                     x 
                
            
        )
    ;

    handleDelete() 
        this.props.onDelete(this.props.char);
    



export default App;

2) En mi código, uso funciones de flecha como propiedades de clase para tales casos (creo que es una de las soluciones más comunes)

class Character extends Component 
    render() 
        return (
            

                

                    this.props.char
                     x 
                
            
        )
    ;

    handleDelete = () => 
        this.props.onDelete(this.props.char);
    

Cuando cree una función para manejar un evento, no olvide añádelo a tus accesorios a través del constructor de la siguiente manera:

constructor (props) 
  super(props)
  this.yourFunction = this.yourFunction.bind(this)

Puntuaciones y reseñas

---

---

Utiliza Nuestro Buscador