渲染组件的问题答案

【问题标题】：Problems rendering a component渲染组件的问题
【发布时间】：2019-03-14 20:55:12
【问题描述】：

忽略代码 xD 中的西班牙语。我在尝试渲染组件（表格的其余部分）时遇到了麻烦。当我做console.log(clientes) 时，数组中的数据就在那里，但在这部分发生了一些事情

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

这是整个代码：

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>
        );
    }
}

我得到的是：

这是console.log(clientes)的输出

这是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>
    );
}

}

这是我获取所有数据的地方（我在本地使用 api）并将其发送到其他组件：

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>
    );
}

}

【问题讨论】：

错误堆栈或更具体一点会有很大帮助！谢谢
您似乎没有正确访问该状态。可以添加clientes 遵循的格式吗？或者可以添加console.log的一个小sn-p@
是的，clientes 是一个数组。我该如何解决这个问题？
使用没有 Object.keys 的 .map
@QuentinC .map 也不起作用

标签： javascript reactjs jsx

【解决方案1】：

你应该像下面这样修改你的代码：

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>
    )

【讨论】：

【解决方案2】：

看起来您通过道具传递的“客户”是这种类型的对象{data: Array<Cliente>}。使用this.props.clientes.data.map(cliente=> ...

【讨论】：