Me gustaría usar Axios para eliminar un libro de mi lista. Uso la URL de mi base de datos + la identificación, pero no puedo encontrar la manera de especificar la identificación en la URL y permanece indefinida.

Se parece a esto :

export default class ListBooks extends React.Component {
    constructor(props) {
        super(props);
        this.state = { error: null, data: [] }
    }
    componentDidMount() {
        Axios.get(process.env.REACT_APP_API_PATH_BOOKS)
            .then(res => {
                this.setState({ data: res.data });
            })
            .catch(errorThrown => {
                this.setState({ error: errorThrown });
            })
    }

    handleChange = event => {
        this.setState({ number: event.target.value });
    }

        /**
        * Use to delete a book by the id.
        */
        handleDelete = () => {
            const id = this.data.number
            console.log(id);
            Axios.delete(process.env.REACT_APP_API_PATH_BOOKS + id)
                .then(res => {
                     console.log(res);
                    console.log(res.data);
                    let cible = document.getElementById("book-admin" + id);
                    cible.remove();
                })
                .catch(errorThrown => {
                    this.setState({ error: errorThrown });
                })
        }

        render() {
            const { data } = this.state;

            return (
                <div>
                    <Container>
                        {data.map(books =>
                            <div key={books.number}>
                                <ListGroup>
                                    <ListGroup.Item disabled id={"book-admin" + data.number}>{books.name} {books.author}
                                    </ListGroup.Item>
                                </ListGroup>
                                <Button variant="outline-warning" size="sm" className="btn-admin-change" id={data.number} onClick={this.props.handleUpdate}>Modifier</Button>
                                <Button variant="outline-danger" size="sm" className="btn-admin-change" onClick={this.handleDelete}>Supprimer</Button>

                            </div>
                        )}
                    </Container>
                </div>
            )
        }
    }

Cada vez que presiono el botón Eliminar, aparece este error: TypeError: No se puede leer la propiedad 'número' de indefinido.

¿Alguien puede decirme lo que hice mal? ¿O lo que necesito para tener toda la información necesaria? Gracias

3
Rom-888 22 jun. 2020 a las 12:29

4 respuestas

La mejor respuesta

Debería ser:

const id = this.state.data.number

No

const id = this.data.number

Un buen consejo para encontrar esto en el futuro es siempre rastrear desde lo indefinido para encontrar lo último que está definido y trabajar desde allí

4
Red Baron 22 jun. 2020 a las 09:32

Si obtiene el número de state, debe hacer this.state.number

Ahora en su código, lo indefinido es causado por:

1- this.setState({ error: errorThrown }) anula el objeto state y elimina el campo de número

O

2- No inicializaste el objeto de estado correctamente al no poner un campo numérico

O

3- this.state.number no se ha establecido o se ha establecido en otra variable indefinida

Lo mejor que puede hacer es imprimir this.state antes de cada acceso. Entonces, el último estado impreso antes del error indefinido dirá cuáles son los campos presentes en el estado. Si no hay un campo de número, entonces el error es causado por 1 o 2 Si hay un campo de número pero no tiene valor (indefinido), entonces el error es causado por 3

1
EEAH 25 jun. 2020 a las 23:45

No se puede leer la propiedad 'x' de undefined: eso significa que está intentando acceder a datos que no existen, por lo que hay varias soluciones que pueden ayudar:

  • validación
if(data && data.number) {
  const id = this.data.number
  console.log(id);
} 
  • encadenamiento opcional: ya que está utilizando react y tiene un entorno ESnext.
if(data?.number) {
  const id = this.data.number
  console.log(id);
} 

Leer más sobre encadenamiento opcional

Propuesta de ECMAScript: operadores de asignación lógica

-1
Muhammed Moussa 22 jun. 2020 a las 10:02

No hay datos de propiedad en el constructor. Agregar estado de datos en el constructor. Y luego reemplace const id = this.data.number con const id = this.state.data.number

0
MD Jahid Hasan 22 jun. 2020 a las 09:49