Блог

я использую загрузку API, разработанного в цикле 3, в react admin с помощью пакета react admin loopback. я сомневаюсь, что я пишу удаленный идентификатор api на основе списка значений в моем ответе. его результат, как загрузить сетку данных react admin.

Это я пытаюсь загрузить в свой react admin на основе react admin loopback.этот стандартный идентификатор шаблона передается на мою страницу шаблона. этот идентификатор основан на вызове api и загрузке в datagrid. я не знаю? как передать api в datagrid

http://localhost:3000/api/templates/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
        'amp; 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;