使用 React.js 渲染 JSON

Question

我在春季使用 react 为我的应用程序创建了一个前端，并且我使用了多对多关系来让可能的员工轮班。当我运行 localhost 时，将返回员工 ID 和姓名，但班次留空。

这是 Json 输出：

{
"_embedded" : {
"employees" : [ {
  "employeeID" : "0001",
  "name" : "John Mitchell",
  "id" : 1,
  "_links" : {
    "self" : {
      "href" : "http://localhost:8080/api/employees/1"
    },
    "employee" : {
      "href" : "http://localhost:8080/api/employees/1"
    },
    "shifts" : {
      "href" : "http://localhost:8080/api/employees/1/shifts"
    }
  }

}

{
"_embedded" : {
"shifts" : [ {
  "shifts" : "Sunday Evening",
  "id" : 1,
  "_links" : {
    "self" : {
      "href" : "http://localhost:8080/api/shifts/1"
    },
    "shift" : {
      "href" : "http://localhost:8080/api/shifts/1"
    }
  }
}, {
  "shifts" : "Monday Day",
  "id" : 2,
  "_links" : {
    "self" : {
      "href" : "http://localhost:8080/api/shifts/2"
    },
    "shift" : {
      "href" : "http://localhost:8080/api/shifts/2"
    }
  }
}, {
  "shifts" : "Tuesday Night",
  "id" : 3,
  "_links" : {
    "self" : {
      "href" : "http://localhost:8080/api/shifts/3"
    },
    "shift" : {
      "href" : "http://localhost:8080/api/shifts/3"
    }
  }
} ]

这是我的反应代码：

class App extends React.Component {

constructor(props) {
    super(props);
    this.state = {employees: []};
}

componentDidMount() {
    client({method: 'GET', path: '/api/employees'}).then(response => {
        this.setState({employees: response.entity._embedded.employees});
    });
}

render() {
    return (
        <EmployeeList employees={this.state.employees}/>
    )
}

}

class EmployeeList extends React.Component{
render() {
    var employees = this.props.employees.map(employee =>
        <Employee key={employee._links.self.href} employee={employee}/>
    );
    return (
        <table>
            <tbody>
                <tr>
                    <th>Employee ID</th>
                    <th>Name</th>
                    <th>Shift</th>
                </tr>
                {employees}
            </tbody>
        </table>
    )
}

}

class Employee extends React.Component{
constructor(props) {
    super(props);
    this.state = {shifts:[]};
}
componentDidMount() {
    client({method: 'GET', path: '/api/employees._links.shifts.href'}).then(response => {
        this.setState({shifts: response.entity._embedded.shifts});
    });
}

render() {
    const shifts = this.state.shifts.map(shift =>
        <div key={shift.id}>{shift.shifts}</div>
    );

    return (
        <tr>
            <td>{this.props.employee.employeeID}</td>
            <td>{this.props.employee.name}</td>
            <td>{shifts}</td>
        </tr>
    )
}

}

ReactDOM.render(
<App />,
document.getElementById('react')

我只想在运行本地主机时返回每个员工的班次（例如：“班次”：“周日晚上”）。

任何帮助将不胜感激，在此先感谢。

编辑

在员工类中尝试轮班时返回 404 错误

Answer 1

您在Shift 类中有循环登录，您想渲染Shift，但在您的渲染函数中创建了更多Shifts，然后将在渲染函数中创建更多，依此类推。除非您想重用它或出于审美原因，否则我认为不需要 Shift 类。

class Employee extends React.Component{

    constructor() {
        // set the initial state of you will get an error in the render function
        this.state = { shifts: [] };
    }

    // load the shifts when the component is ready
    componentDidMount() {
        client({method: 'GET', path: this.props.employee._links.shift.href}).then(response => {
            this.setState({shifts: response.entity._embedded.shifts});
        });
    }

    render() {
        const shifts = this.state.shifts.map(shift =>
            <div key={shift.id}>{shift.shifts}</div>
        );

        return (
            <tr>
                <td>{this.props.employee.employeeID}</td>
                <td>{this.props.employee.name}</td>
                <td>{shifts}</td>
            </tr>
        )
    }
}