javascript - 如何从json文件填充React中ReactTable中被认为是外键的列

Question

问题是我已经映射了对象：一对多（例如“类别”和“产品”）以及使用 React 在前端应用程序中管理外键。

后端是 Spring Boot Data Rest。

列如下：

class ListProd extends Component {
    constructor(props) {
        super(props);
        this.state = { prod: []};
    }
    componentDidMount() {
        this.fetchProds();
    }
    fetchEtuds = () => {
        fetch ('http://localhost:8080/' + 'products')
            .then((response) => response.json())
            .then((responseData) => {
                this.setState({
                    prod: responseData._embedded.products,
                });
            })
            .catch(err => console.error(err));
    }

const columns = [{
            Header: 'Id',
            accessor: 'id',
            Cell: this.renderEditable
        }, {
            Header: 'Code Product',
            accessor: 'codep',
        }, {
            Header: 'Label',
            accessor: 'label',
        },  {
            Header: 'Price',
            accessor: 'price',
        }, {
            id : 'category_id',
            Header: 'Category',
            accessor: '_links.category.href', // **my problem is here**
            ...
            return (
            <div className="App">
            <ReactTable data={this.state.prod} columns={columns} filterable={true} pageSize={10}/>
                
            </div>
        );
    }
}
export default ListProd;

json代码是这样的

{
  "_embedded" : {
    "products" : [ {
      "id" : 1,
      "label" : "l1",
      "price" : 100,
      "_links" : {
        "self" : {
          "href" : "http://localhost:8080/products/1"
        },
        "product" : {
          "href" : "http://localhost:8080/products/1",
          "templated" : true
        },
        "Category" : {
          "href" : "http://localhost:8080/products/1/category"
        }
      }
    }, {
      "id" : 2,

所以问题是我没有得到外键值，而是每行的 URL，如下所示：
http://localhost:8080/products/1/category
for the product id=1 女巫返回 json 格式：

{
  "id" : 1,
  "nameCat" : "C1",
  "_links" : {
    "self" : {
      "href" : "http://localhost:8080/categories/1"
    },
    "category" : {
      "href" : "http://localhost:8080/categories/1"
    },
    "products" : {
      "href" : "http://localhost:8080/categories/1/products",
      "templated" : true
    }
  }
}

如何获取产品 listProd 列表中每个类别的值？

标签： javascript