Блог

Я пытаюсь показать сведения о «пользователях» в «Списке пользователей» с помощью react-таблицы. Данные, полученные из api, выглядят следующим образом.

введите описание изображения здесь

В приведенном ниже коде основные строковые атрибуты «пользователей» отображаются правильно. Однако, если я хочу показать имя дочерней сущности «coreCourse», оно не отображается.

 import React, { Component } from 'react'; import {SERVER_URL} from '../constants.js' import ReactTable from "react-table-6";  import "react-table-6/react-table.css"  import { ToastContainer, toast } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; import AddUser from './AddUser'; import EditUser from './EditUser'; // import { CSVLink } from 'react-csv'; import Button from '@material-ui/core/Button'; import Grid from '@material-ui/core/Grid';  class Userlist extends Component {  constructor(props) {  super(props);  this.state = { users: [] };  }    componentDidMount() {  this.fetchUsers();  }   fetchUsers = () =gt; {  console.log("FETCH")  fetch(SERVER_URL   'users')  .then((response) =gt; response.json())   .then((responseData) =gt; {   this.setState({   users: responseData._embedded.users,  });   })  .catch(err =gt; console.error(err));   }   // Delete user  onDelClick = (link) =gt; {  if (window.confirm('Wollen Sie den User wirklich aus der Datenbank löschen?')) {  fetch(link, {method: 'DELETE'})  .then(res =gt; {  toast.success("User gelöscht", {  position: toast.POSITION.BOTTOM_LEFT  });  this.fetchUsers();  })  .catch(err =gt; {  toast.error("Fehler beim löschen", {  position: toast.POSITION.BOTTOM_LEFT  });  console.error(err)  })   }   }   // Add new user  addUser(user) {  fetch(SERVER_URL   'users/create',   { method: 'POST',   headers: {  'Content-Type': 'application/json',  },  body: JSON.stringify(user)  })  .then(res =gt; this.fetchUsers())  .catch(err =gt; console.error(err))  }    // Update user  updateUser(user, link) {  fetch(link,   { method: 'PATCH',   headers: {  'Content-Type': 'application/json',  },  body: JSON.stringify(user)  })  .then(res =gt; {  toast.success("Changes saved", {  position: toast.POSITION.BOTTOM_LEFT  });  this.fetchUsers();  })  .catch(err =gt;   toast.error("Error when saving", {  position: toast.POSITION.BOTTOM_LEFT  })   )  }   render() {  const columns = [{  Header: 'Vorname',  accessor: 'firstName'  }, {  Header: 'Nachname',  accessor: 'lastName'  },  {  Header: 'Stammklasse',  accessor: 'props.state.users.coreCourse.name' },  {  Header: 'Erfasst am',  accessor: 'createdOn'  },  {  sortable: false,  filterable: false,  width: 100,   accessor: '_links.self.href',  Cell: ({value, row}) =gt; (lt;EditUser user={row} link={value} updateUser={this.updateUser} fetchUsers={this.fetchUsers} /gt;),  }, {  sortable: false,  filterable: false,  width: 100,  accessor: '_links.self.href',  Cell: ({value}) =gt; (lt;Button size="small" color="secondary"   onClick={()=gt;{this.onDelClick(value)}}gt;Löschenlt;/Buttongt;)  }]   return (  lt;div className="App"gt;  lt;Grid containergt;  lt;Grid itemgt;  lt;AddUser addUser={this.addUser} fetchUsers={this.fetchUsers} /gt;  lt;/Gridgt;  {/* lt;Grid item style={{padding: 15}}gt;  lt;CSVLink data={this.state.users} separator=";"gt;Export CSVlt;/CSVLinkgt;  lt;/Gridgt; */}  lt;/Gridgt;  lt;ReactTable data={this.state.users} columns={columns}   filterable={true}/gt;  lt;ToastContainer autoClose={1500} /gt;   lt;/divgt;  );  } }  export default Userlist;  

Вот что показывает приложение введите описание изображения здесь

Кто-нибудь знает, как показать недостающие данные? Я уже перепробовал всевозможные варианты.