1

Estoy creando una app en react, que por el momento simplemente muestra datos de cuentas obtenidas mediante un fetch a un archivo php. Cuando hace la carga muestra los datos en una lista y crea un boton llamado DATOS. Este botón lo que hace o quiero que haga es, sustituir el codigo de un div(main en este caso) por otro html distinto con los datos de la cuenta bancaria pedido mediante otro PHP. El problema viene de que cuando se hace la carga del componente, al añadir el botón DATOS, cuando este es pulsado, dice que esa funcion de "handleClick" en este caso para controlar los eventos de click, no existe. Soy bastante nuevo en React, y me temo que quizás esta no es la mejor forma de cambiar/cargar ese html ni del lugar de las funciones creadas.

Dejo el código del componente completo:

import React from 'react';
import $ from "jquery";

let cuentas;

class Menu extends React.Component {

    showView(iban) {
        console.log(iban);
        fetch('http://localhost:8000/src/php/cuenta.php',
            {
                method: 'POST',
                mode: 'cors',
                body: {
                    iban: iban
                }
            })
            .then(res => res.json())
            .then(
                (result) => {
                    console.log(result);
                }
            )
    }


    cargarVista(cuentas) {
        fetch('http://localhost:8000/src/php/cuentas.php',
            {
                method: 'GET',
                mode: 'cors',
            })
            .then(res => res.json())
            .then(
                (result) => {
                    cuentas = result.message;
                    let i = 0,
                        html = "<ul>";
                    while (i < cuentas.length) {
                        html =
                            html +
                            `<li id="show">${cuentas[i].iban}</li>
      <button id="datos" onClick={this.handleClick()}>Datos</button>`;
                        i = i + 1;
                    }
                    html =
                        html +
                        `</ul> <button id="new" onclick="newView()">Añadir cuenta</button>`;
                    $("#main").append(html);
                    $("#pantalla").html("");

                });
    }

    handleClick(e, data) {
        if (e === "datos") this.indexView(data)
    }

    componentDidMount() {
        this.cargarVista(cuentas)
    }

    render() {

        return (
            <React.Fragment>

                <h1> Cuentas - Luis David López Uceda 2ºDAW </h1>

                <div id="main">
                </div>

                <p id="pantalla"></p>

            </React.Fragment>

        );

    }



}
export default Menu;

1 respuesta 1

0

Tienes que ligar (bind) tu función a la clase. Una forma en el constructor:

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

otra mas directa:

onClick={this.handleClick.bind(this)}

En react no uses append ,etc. Usa componentes o pon condicinales en el render lo que retorna , usa un estado y mejor si usas componentes funcionales.

  constructor(props) {
        super(props);
        this.state = {
           cuentas: [],
         }
        this.handleClick = this.handleClick.bind(this);
      }

en tu render:

render() {

        return (
            <React.Fragment>

                <h1> Cuentas - Luis David López Uceda 2ºDAW </h1>

                <ul="main">
                   {this.state.cuentas.map(value,index => {
                        return  (
                               <li id="show">`${value.iban}`</li>
                               <button id="datos" onClick={this.handleClick()}>Datos</button>   
                                )
                     })
                   }
                </ul>

                <p id="pantalla"></p>

            </React.Fragment>

        );

    }
4
  • Como puedo cambiar de componentes usando por ejemplo un boton? el 14 mar. 2021 a las 12:14
  • en el return pon codigo js, con {}, usa operacion ternaria if else seria asi : showOtrocomponente ? <div></div> : <other></other> . Para que esto funcione tienes qe usar estados el state para que renderice de nuevo. Busca informacion como usar el state de react
    – OsAndNoTi
    el 14 mar. 2021 a las 16:38
  • Tengo un nuevo problema, en conseguido empezar a utilizar los state y a controlar los componentes, pero al hacer la petición a mi PHP, parece ser que en el momento no actualiza los datos y no llegan a mi componente. Estoy usando los estados de esta form: const [verDatos, setVerDatos] = useState(false); peticionFetch.then... setVerDatos, pero con un console log, me dice undefined, igual que el componente, aunque tenga un condicional el 14 mar. 2021 a las 18:46
  • usestate es para componentes funcionales, si te llega undefined en tu peticion el problema es de tu peticion y no react. que sale undefined si es el state es que no lo importaste ese es un hook que se importa y solo es para componentes funcionales.
    – OsAndNoTi
    el 14 mar. 2021 a las 22:20

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.