Verwenden von React.js zum Rendern von JSON

Question

Ich benutze reagieren, um ein Front-End für meine Anwendung im Frühjahr zu erstellen, und ich habe eine Viele-Millionen-Beziehung verwendet, um Mitarbeiter zu verschieben. Wenn ich den localhost ausführe, werden die employeeID und der Name zurückgegeben, aber die Verschiebungen bleiben leer.

Dies ist die Json Ausgang:

{ 
"_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" 
    } 
    } 
} ] 

Das ist mein reagieren Code:

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

Alles, was ich einfach tun möchte, ist die Verschiebung zurückzukehren (z: „Verschiebungen“: „Sonntag Abend“) für jeden Mitarbeiter, wenn ich den lokalen Host ausgeführt werden.

Jede Hilfe würde sehr geschätzt, danke im Voraus.

EDIT

A 404 Fehler zurückgegeben wird, wenn versucht wird Verschiebungen in der Mitarbeiter Klasse zu erhalten

Answer 1

Sie haben Kreis Login in Ihrem Shift Klasse, können Sie die Shift aber in Ihrem Render-Funktion machen, wollen mehr Es werden Shift s erstellt, die dann mehr in der Render-Funktion erzeugen und so weiter. Ich sehe keine Notwendigkeit für die Shift-Klasse, es sei denn, Sie möchten sie wiederverwenden oder aus ästhetischen Gründen.

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