javascript - 使用 React.js 渲染 JSON

Question

我在 Spring 使用 React 为我的应用程序创建一个前端，并且我使用了多对多关系来让员工轮类。当我运行本地主机时，会返回员工 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"
    }
  }
} ]

这是我的 react 代码:

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

我只想在运行本地主机时为每个员工返回类次(例如:“shifts”:“周日晚上”)。

任何帮助将不胜感激，提前致谢。

编辑

尝试获取员工类次时返回404错误

Answer 1

您在 Shift 类中进行了循环登录，您想要渲染 Shift，但在渲染函数中创建了更多 Shift然后将在渲染函数中创建更多内容等等。我认为没有必要使用 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>
        )
    }
}