react-table-v6 - 反应表不显示来自子对象属性的数据

Question

我正在尝试使用 react-table 在“用户列表”中显示“用户”的详细信息。从 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 = () => {
    console.log("FETCH")
    fetch(SERVER_URL + 'users')
    .then((response) => response.json()) 
    .then((responseData) => { 
      this.setState({ 
        users: responseData._embedded.users,
      }); 
    })
    .catch(err => console.error(err)); 
  }

  // Delete user
  onDelClick = (link) => {
    if (window.confirm('Wollen Sie den User wirklich aus der Datenbank löschen?')) {
      fetch(link, {method: 'DELETE'})
      .then(res => {
        toast.success("User gelöscht", {
          position: toast.POSITION.BOTTOM_LEFT
        });
        this.fetchUsers();
      })
      .catch(err => {
        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 => this.fetchUsers())
    .catch(err => console.error(err))
  } 

  // Update user
  updateUser(user, link) {
    fetch(link, 
    { method: 'PATCH', 
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(user)
    })
    .then(res => {
      toast.success("Changes saved", {
        position: toast.POSITION.BOTTOM_LEFT
      });
      this.fetchUsers();
    })
    .catch(err => 
      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}) => (<EditUser user={row} link={value} updateUser={this.updateUser} fetchUsers={this.fetchUsers} />),
    }, {
      sortable: false,
      filterable: false,
      width: 100,
      accessor: '_links.self.href',
      Cell: ({value}) => (<Button size="small" color="secondary" 
        onClick={()=>{this.onDelClick(value)}}>Löschen</Button>)
    }]

    return (
      <div className="App">
        <Grid container>
          <Grid item>
            <AddUser addUser={this.addUser} fetchUsers={this.fetchUsers} />
          </Grid>
          {/* <Grid item style={{padding: 15}}>
            <CSVLink data={this.state.users} separator=";">Export CSV</CSVLink>
          </Grid> */}
        </Grid>
        <ReactTable data={this.state.users} columns={columns} 
          filterable={true}/>
        <ToastContainer autoClose={1500} /> 
      </div>
    );
  }
}

export default Userlist;

这是应用程序显示的内容 在此处输入图像描述

有人知道如何显示丢失的数据吗？我已经尝试了各种选择。