使用React.js呈現JSON

我正在使用反應來爲我的應用程序在春天創建一個前端，並且我使用了許多關係來讓員工輪班。當我運行本地主機時，會返回employeeID和名稱，但這些班次留空。使用React.js呈現JSON

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

所有我只是想要做的就是回到移位（延續：「轉變」：「星期天晚上」），爲每個員工當我運行本地主機。

任何幫助將不勝感激，在此先感謝。

編輯

試圖讓Employee類轉變

來源

2017-05-02 tablecloth26

我不明白你到底需要什麼。你有'ShiftList'組件，但它永遠不會被使用。它什麼也沒有返回，我們看不到'Shift'組件。請檢查您的問題添加相關的細節。 – alix

'ShiftList'中的渲染方法不會返回任何內容... –

@alix我創建了shiftList（重命名爲shift）組件，以返回鏈接到每個員工的輪班。我想要做的就是返回鏈接到每個員工的輪班......檢查顯示json輸出格式的圖像鏈接。（我是新來的反應，並在返回轉換時遇到麻煩，提前道歉） – tablecloth26

您的Shift類圓形登錄時返回404錯誤，要渲染的Shift但在渲染功能更Shift s將被創建，然後將在渲染函數中創建更多等等。我沒有看到Shift類的任何需要，除非你想重用它或出於estetic的原因。

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

來源

2017-05-02 18:34:49

使用React.js呈現JSON

回答

相關問題