使用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

回答

相关问题