Estoy trabajando en un ReactJS proyecto donde se puede generar una actividad aleatoria cuando se presiona el botón generar. Estoy haciendo una captura a mi api para mostrar algunos datos de ella. Esto funciona bien. Ahora quiero hacer la captura y visualización de los datos que se devuelven cada vez que haga clic en el botón generar (que está en la casa componente). De modo que el botón generar, tiene que hacer una nueva captura y actualización de los componentes. También tiene que estar vacío por defecto. He buscado un rato y no puede encontrar una respuesta pertinente. Puede que algunos de ustedes me ayude a salir? Gracias.

fetch componente

import React from "react";

export class ItemLister extends React.Component {
    constructor() {
        super();
        this.state = { suggestion: "" };
    }

    componentDidMount() {
        fetch("......./suggestions/random", {
            method: "GET",
            dataType: "JSON",
            headers: {
                "Content-Type": "application/json; charset=utf-8"
            }
        })
            .then(resp => {
                return resp.json();
            })
            .then(data => {
                this.setState({ suggestion: data.suggestion });
            })
            .catch(error => {
                console.log(error, "catch the hoop");
            });
    }

    render() {
        return <h2>{this.state.suggestion}</h2>;
    }
}

casa componente

import React from "react";
import { ItemLister } from "./apiCall";

export class Home extends React.Component {
    constructor(props) {
        super(props);
        console.log();
        window.sessionStorage.setItem("name", this.props.params.name);
        window.sessionStorage.setItem("token", this.props.params.token);
    }

    render() {
        return (
            <div className="contentContainer AD">
                <table>
                    <thead>
                        <tr>
                            <th>
                                <p>Het is heel leuk als het werkt!</p>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <ItemLister />
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div className="container center">
                    <button>GENERATE</button>
                    <button>SAVE</button>
                    <button>MATCH</button>
                </div>
            </div>
        );
    }
}
  • Está usted todavía se enfrentan a cualquier problema con el renderizado sugerencia?
  • No, no con la representación. El principal problema es la configuración de un onClick en el botón generar para conectar la recuperación de la función.
  • Desea actualizar ItemListener componente en cada momento haciendo clic en el botón generar. La correcta?
  • Eso es correcto

2 Comentarios

  1. 9

    Yo diría que usted se mueva de su captura lógica para home componente y mantener un estado en home componente así como ustedes están haciendo en Itemlister componente. Entonces todo lo que tienes que hacer es pasar de su estado para Itemlister componente. Su casa componente tendrá este aspecto

    export class Home extends React.Component {
    constructor(props) {
        super(props)
        this.state = {suggestion: ""}
        ...
    }
    
    componentDidMount(){
      //For initial data
      this.fetchData();
    }
    
    fetchData = () => {
      fetch("......./suggestions/random", {
        method: "GET",
        dataType: "JSON",
        headers: {
          "Content-Type": "application/json; charset=utf-8",
        }
      })
      .then((resp) => {
        return resp.json()
      }) 
      .then((data) => {
        this.setState({ suggestion: data.suggestion })                    
      })
      .catch((error) => {
        console.log(error, "catch the hoop")
      })
    }
    
    render() {
        return (
            ...
                    <tbody >
                       //Pass state to itemlister like this
                        <tr><td><ItemLister suggestion={this.state.suggestion}/></td></tr>
                    </tbody>
                </table>
                <div className="container center">
                    //Add event handler here. On every click it will fetch new data
                    <button onClick={this.fetchData}>GENERATE</button>
                    <button>SAVE</button>
                    <button>MATCH</button>
                </div>
            </div>
        )
      }
    }

    Y su ItemLister componente tiene la responsabilidad de mostrar los datos a través de los accesorios.

    export class ItemLister extends React.Component {
        constructor() {
        super();
        }
    
        render() {
        return(
          <h2> 
            {this.props.suggestion}
          </h2>
          )
         }
        } 

    Como por la sugerencia por dubes en el comentario, Si no desea mantener el estado de este componente, a continuación, puede hacer que este componente funcional como esta

    function ItemLister(props) {
      return <h2> 
                {props.suggestion}
              </h2>;
    }
    • Esta es mucho más limpio enfoque (y recomendado, así como por mi entendimiento). Una sugerencia: el ItemListener componente puede ser un componente funcional
    • Esto funciona muy bien sin embargo, no está vacío por defecto. Se hace una captura cuando la carga de la página, así que ya hay datos antes de que el usuario pulsa generar.
    • Si usted lo desea vacío por defecto, a continuación, sólo quitar this.fetchData(); línea de componentDidMount función.
    • actualizado.
    • Gracias chicos funcionó.
    • Pero, la captura de los datos antes de que se les pida, no de riesgo para obtener potencialmente demasiado de riesgos y datos de rendimiento y consumo de memoria?

  2. 2

    No estoy muy seguro de si he entendido bien… pero ya que estás añadiendo su captura en el interior de una de reaccionar de la clase extendida, se puede representar dentro de la casa componente así:

      state = {
        visible: false
      }
    
      generateItem() {
        if (this.state.visible) {
          return <ItemLister />
        }
        return <h2>nothing to show</h2>
      }
    
      render() {
        return(
          <div>
            <button onClick={() => this.setState({visible: true})}>Click</button>
            {this.generate()}
          </div>
        )
      }

    La función onClick actualizará el estado cada vez que el usuario hace clic en él y una nueva procesar va a ocurrir lo que pone generateItem de nuevo con una nueva palabra al azar.

    Espero que esto es lo que estaban buscando.

    • Gracias, esto me ayudó mucho, sin embargo tengo que hacer la captura cada vez que se pulsa el botón. Ahora sólo recuperar la primera vez que se hace clic.
    • Debe llamar al recuperar de nuevo una vez que usted haga clic en el botón de nuevo

Dejar respuesta

Please enter your comment!
Please enter your name here