Ignorez l'espagnol dans le code xD. J'ai des difficultés à essayer de rendre un composant (le reste de la table). Quand je fais console.log(clientes) les données du tableau sont là mais dans cette partie quelque chose se passe

return(
        <React.Fragment>
            {Object.keys(clientes).map(cliente => (
                <Cliente
                    key={cliente}
                    info={this.props.clientes[cliente]} 
                />
            ))}
        </React.Fragment>
    )

Voici tout le code:

import React,{Component} from 'react';
import Cliente from './Cliente';

export default class ListadoClientes extends Component {

    mostrarClientes = () => {
        const clientes = this.props.clientes;

        if(clientes.length === 0) return null;

        return(
            <React.Fragment>
                {Object.keys(clientes).map(cliente => (
                    <Cliente
                        key={cliente}
                        info={this.props.clientes[cliente]} 
                    />
                ))}
            </React.Fragment>
        )
    }

    render() {
        return (
            <div className="container col-12">
                <table className="table table-striped table-bordered">
                    <thead className="text-center">
                        <tr>
                            <th scope="col" className="align-middle">RAZÓN SOCIAL</th>
                            <th scope="col" className="align-middle">RUC</th>
                            <th scope="col" className="align-middle">CORREO ELECTRÓNICO</th>
                            <th scope="col" className="align-middle">TELÉFONO</th>
                            <th scope="col" className="align-middle">DIRECCIÓN</th>
                            <th scope="col" className="align-middle" colSpan="2">ACCIÓN</th>
                        </tr>
                    </thead>
                    <tbody>
                        {this.mostrarClientes()} 
                    </tbody>
                </table>
            </div>
        );
    }
}

Tout ce que j'obtiens c'est ça : entrez la description de l'image ici

Ceci est la sortie de console.log(clientes)

enter image description here

C'est le code de Cliente

import React,{Component} from 'react';

export default class Cliente extends Component {

render() {

    const {RAZON_SOCIAL, RUC, DIRECCION, TELEFONO, EMAIL, ID_CLIENTE} = this.props.info;

    return (
        <tr key={ID_CLIENTE} className="align-middle">
            <td>{RAZON_SOCIAL}</td>
            <td>{RUC}</td>
            <td>{EMAIL}</td>
            <td>{TELEFONO}</td>
            <td>{DIRECCION}</td>
            <td><button value={ID_CLIENTE} className="btn btn-warning">EDITAR</button></td>
            <td><button onClick={this.deleteEmpresa} value={ID_CLIENTE} className="btn btn-danger">ELIMINAR</button></td>             
        </tr>
    );
}

}

Et c'est là que j'ai récupéré toutes les données (j'utilise une API en local) et que je les ai envoyées à d'autres composants :

import React,{Component} from 'react';
import {BrowserRouter, Route, Switch} from 'react-router-dom';
import axios from 'axios';

//COMPONENTES--------------------------
import Header from './Header';
import Clientes from './Clientes';
import Navegacion from './Navegacion';
//-------------------------------------

//API http://192.168.1.146:4181/

export default class Router extends Component {

state = {
    clientes: []
}

componentDidMount() {
    this.obtenerClientes();
}

//METODOS HTTP
obtenerClientes = () => {
    axios.get(`http://192.168.1.146:4181/`)
        .then(res => {
            this.setState({
                clientes: res.data
            })
        })
}

render() {
    return (
        <BrowserRouter>
            <div className="container-fluid">
                <div className="row justify-content-center">
                    <Header/>
                    <Navegacion/>
                    <Switch>
                        <Route exact path="/" render={() => {
                            return(
                                <Clientes
                                    clientes={this.state.clientes}
                                />
                            )
                        }}/>

                    </Switch>
                </div>
            </div>
        </BrowserRouter>
    );
}

}

-1
Antonio Barrera 14 mars 2019 à 23:55

2 réponses

Meilleure réponse

Vous devez modifier votre code comme ci-dessous :

return(
        <React.Fragment>
            {Object.keys(clientes.data).map(cliente => (   // ==> Modify "clientes" to "clientes.data"
                <Cliente
                    key={cliente}
                    info={this.props.clientes.data[cliente]}   // ==> Modify "clientes" to "clientes.data"
                />
            ))}
        </React.Fragment>
    )
0
tinwan 18 mars 2019 à 02:21

On dirait que vos "clientes" qui sont transmises via les props sont un objet de ce type {data: Array<Cliente>}. Utilisez this.props.clientes.data.map(cliente=> ...

0
darkdante 14 mars 2019 à 21:36