如何回送远程API响应负载反应管理数据网格(How to Loopback Remote api r

2019-09-28 00:36发布

我使用回送3开发API加载到反应使用反应管理回环 package.my疑问就是我写在我的response.its值的远程API基于ID的获取列表结果如何装入反应管理数据网格管理员

这个我尝试基于反应管理加载到我的反应管理loopback.this标准模板ID传递给我的模板page.this基于ID调用API,并加载到datagrid.i不知道? 如何通过在数据网格的API

HTTP://本地主机:3000 / API /模板/ gettemplatebystandardtemplateid standardtemplateid = 5c934f75fd22e006749e4ab8

StandardTemplate.js

import React, { Component } from 'react';
import {
    List,
    SimpleList,
    Responsive,
    Datagrid,
    TextField,
    EditButton,
    ShowButton, Edit, SimpleForm, TextInput
} from 'react-admin';
import { Link } from 'react-router-dom';

import { Config } from '../../config';
import { Button } from '@material-ui/core';
import { withStyles } from '@material-ui/core/styles';
const styles = {
    button: {
        fontWeight: 'bold',
        // This is JSS syntax to target a deeper element using css selector, here the svg icon for this button
        '& svg': { color: 'orange' }
    },
};
const MyEditButton = withStyles(styles)(({ classes, ...props }) => (
    <Button source="id"
        component={Link}
        to={{
            pathname: `/template/${props.record.id}`
            // state: { id: props.record.id }
        }}
    >
        Templates
                                             </Button>

));
class StandardTemplateList extends Component {
    componentDidMount() {
        console.log(this.props);
        document.title = Config.app.name + ' - StandardTemplate';
    }
    render() {
        return (
            <List {...this.props}>
                <Responsive
                    small={
                        <SimpleList
                            primaryText={record => record.name}
                            secondaryText={record => `${record.services} views`}
                            tertiaryText={record => new Date(record.createdAt).toLocaleDateString()}
                        />
                    }

                    medium={<Datagrid>
                        <TextField source="id" />
                        <TextField source="name" />
                        <TextField source="format" />
                        <TextField source="services" />
                        <TextField source="createdby" />
                        <MyEditButton />
                        <EditButton />
                        <ShowButton />
                    </Datagrid>
                    }
                />
            </List>
        );

    }
}

export default StandardTemplateList;

Template.js

import React, { Component } from 'react';
import {
    List,
    SimpleList,
    Responsive,
    Datagrid,
    TextField,
    EditButton,
    ShowButton
} from 'react-admin';
import { Link } from 'react-router-dom';
import { GET_LIST,GET_ONE } from 'react-admin';
import Card from '@material-ui/core/Card';
import CardHeader from '@material-ui/core/CardHeader';
import dataProvider from '../../dataProvider';
import { Button } from '@material-ui/core';

class TemplateList extends Component {

componentDidMount() {
        console.log(this.props);
        document.title = Config.app.name + ' - Template';
    }
    render() {

        return (
        <List {...this.props}>
        <Responsive
            small={
                <SimpleList
                    primaryText={record => record.name}
                    secondaryText={record => `${record.services} views`}
                    tertiaryText={record => new Date(record.createdAt).toLocaleDateString()}
                />
            }

            medium={
            <Datagrid>
                <TextField source="id" />
                <TextField source="name" />
                <TextField source="createdby" />
                <EditButton />
                <ShowButton />
            </Datagrid>
            }
        />
    </List>
  ) }
}

export default TemplateList;
文章来源: How to Loopback Remote api response load in react admin datagrid