1

quiero hacer un buscador de clientes por número de identificación, por ahora tengo que al momento de digitar el numero y hacer click en el boton me mande el n° de doc al backend en Laravel, logro que me retorne el valor, pero no puedo imprimirlo en la sección que quiero. Hace poco inicie con React, entonces si alguien me puede ayudar, gracias.

/index.js

import React, { Component, useState } from 'react';
import ReactDOM from 'react-dom';
import SalesDetails from './cafeto/SalesDetails';
import SearchForm from './cafeto/SearchForm';


export default class Index extends Component {
  constructor(props) {
    super(props);
    this.state = { value: "" };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
}

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

  

async handleSubmit(event)  {

    event.preventDefault();

    let result = await fetch(`http://127.0.0.1:8000/+++/+++/+++/search/${this.state.value}`, {
        method: 'GET'
      });
      let data = await result.json()
}

  render() {
    return ( <div>
        <SearchForm handleSubmit={this.handleSubmit} value={this.state.value} handleChange={this.handleChange} />
        <SalesDetails 

         //Componente en el que quiero imprimir los datos, documento.

         />  
    </div>
    );
  }
}

if (document.getElementById('example')) {
    ReactDOM.render(<Index />, document.getElementById('example'));
}

/SearchForm.jsx

En este componente tengo el formulario donde realizo el envio del dato al backend, lo recibo y hago la petición a la base de datos

import React from "react";

export default function SearchForm(props) {
 
        return (
            <div>
                <div className="card card-outline shadow">
                    <div className="card-header">
                        <h3 className="card-title">Sales</h3>
                    </div>
                    {/* /.card-header */}
                    <div className="card-body">
                        <div className="row justify-content-center">
                            <div className="col-md-6">
                                <form
                                    method="POST"
                                    acceptCharset="UTF-8"
                                    onSubmit={props.handleSubmit}
                                >
                                    <input
                                        type="hidden"
                                        name="_token"
                                        defaultValue="DyRd0muSjN3MGHBFxcLoN21zv7HZsub9iQPjkvse"
                                    />
                                    <input
                                        value={props.value}
                                        onChange={props.handleChange}
                                        className="form-control"
                                        placeholder="Ingrese el documento."
                                        required
                                        name="search"
                                        type="search"
                                    />
                                    <br />
                                    <div className="row justify-content-center">
                                        <div className="col-md-2">
                                            <input
                                                className="btn btn-primary"
                                                type="submit"
                                                defaultValue="Buscar"
                                            />
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }


salesDetails.jsx y este es el componente donde quiero imprimir la consulta, para luego generar una factura.

 import React, { Component } from "react";

export default function SalesDetails(props) {
 
        return (
            <div>
                <div className="card card-outline shadow">
                    <div className="card-header">
                        {/* <h3 className="card-title">Sales</h3> */}
                    </div>
                    {/* /.card-header */}
                    <div className="card-body">
                        <div className="row justify-content-center">
                            <div className="col-md-6">
                               // Documento
                             
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }




1
  • Para poder imprimir en pantalla el resultado de tu llamada a la api tendrás que guardarlo en un estado de react, y este mismo lo puedes imprimir en SalesDetails, puedes iniciarlo en un array vacío o hacer una condición para que lo muestre si tiene un length, pero si o si habrás de guardarlo en un estado que estarás imprimiendo en pantalla. Commented el 31 ene. 2022 a las 22:07

1 respuesta 1

1

Para poder imprimir en pantalla el resultado de tu llamada a la api tendrás que guardarlo en un estado de react, y este mismo lo puedes imprimir en SalesDetails, puedes iniciarlo en un array vacío o hacer una condición para que lo muestre si tiene un length, pero si o si habrás de guardarlo en un estado que estarás imprimiendo en pantalla.

import React, { Component, useState } from 'react';
import ReactDOM from 'react-dom';
import SalesDetails from './cafeto/SalesDetails';
import SearchForm from './cafeto/SearchForm';


export default class Index extends Component {
  constructor(props) {
    super(props);
    this.state = { value: "", data: [] };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
}

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

  

async handleSubmit(event)  {

    event.preventDefault();

    let result = await fetch(`http://127.0.0.1:8000/cafeto/admin/sales/search/${this.state.value}`, {
        method: 'GET'
      });
    let response = await result.json()
    this.setState({ data: response })
}

  render() {
    return ( <div>
        <SearchForm handleSubmit={this.handleSubmit} value={this.state.value} handleChange={this.handleChange} />
        <SalesDetails 
          data={this.state.data}
         //Componente en el que quiero imprimir los datos, documento.

         />  
    </div>
    );
  }
}

if (document.getElementById('example')) {
    ReactDOM.render(<Index />, document.getElementById('example'));
}
4
  • He colocado lo que decias pero pues me ha saltado esto en la consola. Uncaught (in promise) Error: Objects are not valid as a React child (found: object with keys {document, first_name}). If you meant to render a collection of children, use an array instead.
    – Zetian
    Commented el 31 ene. 2022 a las 22:29
  • Que tipo de respuesta recibes de la api?(array, string...) Commented el 31 ene. 2022 a las 22:37
  • Recibo un array, pues necesito el n° de doc y su respectivo nombre, etc. Creo que necesito recorrer ese arreglo, me enrede xd. Podrias explicarme como hacerlo?
    – Zetian
    Commented el 31 ene. 2022 a las 22:41
  • Creo q ya se como. Muchas gracias, tu aporte me ayudo bastante.
    – Zetian
    Commented el 31 ene. 2022 a las 22:48

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.