使用 React 渲染带有子对象的 JSON答案

【问题标题】：Render JSON with sub object using React使用 React 渲染带有子对象的 JSON
【发布时间】：2020-08-24 01:13:02
【问题描述】：

也许有人知道，我怎样才能从 JSON 渲染“部门”对象？

[
    {
        "id": 1,
        "name": "one",
        "department": {
            "id": 1,
            "name": "development"
        }
    },
    {
        "id": 2,
        "name": "two",
        "department": {
            "id": 2,
            "name": "testing"
        }
    }
]

我正在尝试显示这是我的渲染的数据

    render() {
        const title =<h3>Employee</h3>;
        const {Employees, isLoading} = this.state;

        if (isLoading)
            return(<div>Loading....</div>);

        let rows=
            Employees.map( employee =>
                <tr key={employee.id}>
                    <td>{employee.id}</td>
                    <td>{employee.name}</td>
                    <td>{employee.department.name}</td>
                    <td><Button size="sm" color="danger" onClick={() => this.remove(employee.id)}>Delete</Button></td>

                </tr>);

return {rows};

非常感谢！

【问题讨论】：

不确定您的问题是什么。你需要提供你需要的输出

标签： node.js json reactjs

【解决方案1】：

    render() {
        const title =<h3>Employee</h3>;
        const {Employees, isLoading} = this.state;

        if (isLoading)
            return(<div>Loading....</div>);

        let rows=
            Employees.map( employee => {
                return `<tr key=${employee.id}>
                    <td>${employee.id}</td>
                    <td>${employee.name}</td>
                    <td>${employee.department.name}</td>
                    <td><Button size="sm" color="danger" onClick=${() => this.remove(employee.id)}>Delete</Button></td>

                </tr>` });

return {rows};

【讨论】：

【解决方案2】：

我修复了id！我需要修改我的后端代码......从“部门”到私人String departmentName;

和前面

 let rows=
        Employees.map( employee =>
            <tr key={employee.id}>
                <td>{employee.id}</td>
                <td>{employee.name}</td>
                <td>{employee.department.departmentName}</td>
                <td><Button size="sm" color="danger" onClick={() => this.remove(employee.id)}>Delete</Button></td>

            </tr>);

【讨论】：