首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在react-admin中使用getOne传递额外的数据?

在react-admin中使用getOne传递额外的数据,可以通过自定义数据提供者来实现。以下是一种可能的实现方式:

  1. 创建一个自定义数据提供者(dataProvider),继承自默认的数据提供者。可以使用react-admin提供的fetchUtils库来发送HTTP请求。
代码语言:txt
复制
import { fetchUtils } from 'react-admin';

const apiUrl = 'https://api.example.com'; // 替换为实际的API地址

const customDataProvider = {
    ...defaultDataProvider, // 默认的数据提供者

    getOne: (resource, params) => {
        const { id, extraData } = params;

        const url = `${apiUrl}/${resource}/${id}`;

        const options = {
            headers: new Headers({
                Accept: 'application/json',
            }),
        };

        return fetchUtils.fetchJson(url, options)
            .then(({ json }) => ({
                data: {
                    ...json,
                    extraData, // 将额外的数据添加到返回结果中
                },
            }));
    },
};

export default customDataProvider;
  1. 在使用react-admin的地方,将自定义数据提供者传递给<Admin>组件。
代码语言:txt
复制
import React from 'react';
import { Admin, Resource } from 'react-admin';
import customDataProvider from './customDataProvider';

const App = () => (
    <Admin dataProvider={customDataProvider}>
        {/* 定义资源和页面 */}
    </Admin>
);

export default App;
  1. 在使用<Edit><Show>组件时,通过<FormDataConsumer>组件来获取额外的数据。
代码语言:txt
复制
import React from 'react';
import { Edit, SimpleForm, TextInput, FormDataConsumer } from 'react-admin';

const PostEdit = (props) => (
    <Edit {...props}>
        <SimpleForm>
            <TextInput source="title" />
            {/* 获取额外的数据 */}
            <FormDataConsumer>
                {({ formData }) => (
                    <TextInput source="extraData" defaultValue={formData.extraData} />
                )}
            </FormDataConsumer>
        </SimpleForm>
    </Edit>
);

export default PostEdit;

这样,当使用<Edit><Show>组件时,通过自定义数据提供者的getOne方法,可以传递额外的数据,并在表单中使用<FormDataConsumer>组件来获取并展示这些额外的数据。

请注意,以上代码仅为示例,实际情况中需要根据具体需求进行适当的修改和调整。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

使用DjangoSession和Cookie来传递数据

在Django,Session和Cookie是两种常用机制,用于在服务器端和客户端之间传递数据。下面我将简要介绍如何在Django中使用Session和Cookie来传递数据。...1、问题背景在 Django ,可以使用 request.POST 来获取表单提交数据。但是,如果需要在另一个视图中使用这些数据,就需要使用 Session 或 Cookie 来传递。...2、解决方案为了解决这个问题,可以使用 Session 或 Cookie 来传递数据使用 SessionSession 是一个临时存储,可以存储在服务器端或客户端。...Cookie和Session传递敏感信息时要格外小心,确保使用HTTPS来加密通信,并且避免在Cookie或Session存储敏感数据,尤其是未加密数据。...数据大小限制:Cookie大小通常有限制,因此如果要传递大量数据,最好使用Session。

14410

react-admin+material ui5.0项目的总结

前言 大家好 我是歌谣 今天对于自己项目做个详细总结 背景 为了更好进行前后端设计开发 后端目前用postgrest设计数据库 前端直接使用react-admin和material ui...就是图中右三块 涉及局部知识点 弹性布局代码 <Grid style...向对应页面插入dom节点即可展示 左侧 Rc-tree 安装 yarn add rc-tree 务必引入样式 import "rc-tree/assets/index.css" 数据转换部分...数据需要转换为带有title和key数据 转换方式有很多种 这边简单写一下转换过程 dataProviders.getStyleTree('t_prod_category', 't_prod_style...上下两层 分为两个组件 组件目录设计 小结 增删改查设计直接利用react-admin即可实现 页面得增删改查可以直接通过表名进行数据 得增删改查设计 贴出增加修改代码 import *

35030
  • 自用后台快速开发

    前言 工作,很多自己维护系统需要开发后台管理系统,这类系统大多在内网使用,进行简单数据CURD,虽然不一定是重要项目,但是有一套管理后台,避免以后维护过程中一直操作SQL,对于提高运维效率,减少维护过程中发生故障也是很有用...在近1年日志系统后台开发过程,尝试过几个管理后台开发,使用同样技术,快速搭建,快速开发,感觉挺好用,于是将这些内容分享出来,希望对大家有所帮助。...image.png image.png 在react-admin线上预览环境,可以找到自己想要大部分控件和功能,于是决定选择这个框架,下载回来,然后按照步骤自己搭建,顺利跑起来就成功了一半。...(二)后端:ThinkPHP 前端框架跑起来之后,就要来选择合适后端了,通过查看官方文档,发现react-admin支持4类数据源: image.png 这里最熟悉就是REST风格数据了,所以就暂定选择一个...服务外,还要考虑框架本身跟数据交互,最终还是选择自己熟悉ThinkPHP,简单设定路由规则,就实现了rest,然后再开发业务代码就很轻松了。

    1.4K40

    何在 MSBuild 中正确使用 % 来引用每一个项(Item)数据

    MSBuild 写在 每一项是一个 Item,Item 除了可以使用 Include/Update/Remove 来增删之外,还可以定义其他数据(Metadata)...使用 % 可以引用 Item 数据,本文将介绍如何正确使用 % 来引用每一个项数据。...---- 定义 Item 数据 就像下面这样,当引用一个 NuGet 包时,可以额外使用 Version 来指定应该使用哪个特定版本 NuGet 包。...使用数据 如果你希望自己处理编译过程,那么可能会对元数据做更多处理。...为了简单说明 % 用法,我将已收集到所有的元数据和它本体一起输出到一个文件。这样,后续编译过程可以直接使用这个文件来获得所有的项和你希望关心它所有元数据

    29210

    SpringBoot单元测试(实例)

    SpringBoot单元测试实例 测试实例 1、创建基于Spring Data JPAWeb应用ch9_2 2、由于我springBoot是2.4.4,需要额外引入JUnit 3、配置数据库连接等基本属性...1、创建基于Spring Data JPAWeb应用ch9_2 2、由于我springBoot是2.4.4,需要额外引入JUnit 在pom.xml文件添加 ...=MYSQL #指定是否在日志显示SQL语句 spring.jpa.show-sql=true #指定自动创建、更新数据库表等配置,update表示如果数据存在持久化类对应表就不创建,不存在就创建对应表...创建名为com.ch.ch9_2.repository包,并在改包创建数据访问接口StudentRepository package com.ch.ch9_2.repository; import...,和上面的不一样,上面的例子是造了个数据,这个是真的查了数据库之后比较 我们数据是 “id” : 1, “sno” : “5555”, “sname” : “陈恒”, “ssex” : “

    1.2K20

    sooth脚手架

    需要写注解,与项目具有耦合性,作者本人全栈工程师,并没有使用过swagger经历去除导入导出,降低依赖,精简代码一个类似ruoyi精简小项目,更加轻量级功能系统管理部门管理管理部门基本信息用户管理管理用户基本信息基础管理数据字典维护可能固定基本信息日志管理监控系统执行日志代码生成器追求效果...则前端组件失效隐藏路由隐藏后,路由将不再显示隐藏tab隐藏后,不在tab显示缓存路由开启后,切换tab将读取缓存页面聚合路由开启后,展示到tab后,无法在tab关闭,列:首页按钮配置配置菜单支持按钮按钮维护在数据字典...答案是肯定,的确很多解决措施是不同按钮有不同按钮权限角色管理管理支持菜单权限,数据权限和按钮权限列表页菜单权限选择支持菜单按钮权限按钮授权数据权限控制查询范围,可额外指定支持查看部门数据范围同样在数据字典维护角色用户查看当前角色关联用户系统监控性能监控监控服务器基本信息...,如果不清空,当编辑一个页面再新增会看到新页面是编辑页数据,这里已经进行了优化,无需再写api调用简单增删改查,需继承自baseApi,预先写好了调用后端接口,不需要额外再写import { defHttp...承诺脚手架不需要让开发者在意所谓数据权限,逻辑删除,这些都会被无感屏蔽,即便多租户也一样,因此,sql注入数据权限,不需要额外增加类似${},这对开发者并不友好这不是随意设计玩意,技术和脚手架会稳定更新

    54150

    面向初学者高阶组件教程

    作为值函数与部分调用 就像是数字、字符串、布尔值 一样,函数也是值,意味着可以像传递其他数据一样传递函数,可以将函数作为参数传递给另外一个函数。...如果曾经使用过类似 map 这样函数,可能已经很熟悉高阶函数。如果不熟悉 map,它是一个数组遍历方法,接受一个函数作为参数应用到数组每个元素。...你也可以返回一个有状态组件,因为 JavaScript 类不过是函数语法糖。这样就可以使用到 React 生命周期方法,比如 componentDidMount。...点击这里 可以看到一个更加完整例子。 结论:高阶组件是 react-redux 也是使用 HOC, connect 将应用 store 传递到“已连接” 组件。...附加练习 下面有一些练习,来巩固对 HOC 理解: 写一个反转其输入 HOC 编写一个HOC,将 API 数据提供给组件 写一个HOC来实现 shouldComponentUpdate,以避免更新

    66410

    脚手架soothboot

    演示地址:http://150.158.30.246:8080/前端保留了vben已有的功能,可以原汁原味使用ven改了重大几处功能tab切换,去除动画,理由:限制了template里不能多组件新增功能...则前端组件失效隐藏路由隐藏后,路由将不再显示隐藏tab隐藏后,不在tab显示缓存路由开启后,切换tab将读取缓存页面聚合路由开启后,展示到tab后,无法在tab关闭,列:首页按钮配置配置菜单支持按钮按钮维护在数据字典...,可额外指定支持查看部门数据范围同样在数据字典维护角色用户查看当前角色关联用户系统监控性能监控监控服务器基本信息Redis监控监控redis基本信息风格前端开发页面开发标准vben开发风格,一个区别...无需再写api调用简单增删改查,需继承自baseApi,预先写好了调用后端接口,不需要额外再写import { defHttp } from '/@/utils/http/axios';import...,大家有目共睹,为了追求高效性能,缓存应用不可缺少,soothboot所有查询数据的确都会进行缓存,sooth可以让读到缓存与数据库一致,却会改变开发者正常写法,试想一下,读到了数据缓存,

    39600

    Spring Boot 应用测试Spring Boot 应用测试

    这是本书最后一章,本章介绍 Spring Boot 应用测试(质量保障)相关内容。我们在项目开发中使用分层架构,在测试也进行分层测试。...而在实际开发场景,我们有时候需要独立于数据库进行 Service 层逻辑开发。这个时候就可以直接把数据库Dao层代码Mock 掉。...,相当于把实现类UserDao对象使用mockUserDao对象给“偷梁换柱”了。...运行上面的测试类,可以发现测试成功 图15-2 MockUserServiceTest测试成功 在测试代码打印日志,输出 getOne(1)方法返回对象是我们 Mock 对象mockUser...另外,针对 JSON 数据接口,使用 JsonPath 可以方便地进行 JSON 数据结果校验。

    1.5K30

    Spring(5)——Spring 和数据库编程

    我们自己定义 DBUtil 工具已经很实用了,因为是从模板化代码抽离出来,所以我们可以一直使用 Spring JDBC 要想使用 Spring JDBC 模块,就必须引入相应 jar...,接下来我们来实际在 Spring 中使用一下 JDBC: 配置数据库资源 就像我们创建 DBUtil 类,将其中连接信息封装在里面一样,我们需要将这些数据库资源配置起来 配置方式: 使用简单数据库配置...使用第三方数据库连接池 我们可以使用 Spring 内置类来配置,但大部分时候我们都会使用第三方数据库连接池来进行配置,由于使用第三方类,一般采用 XML 文件配置方式,我们这里也使用 XML...使用第三方数据库连接池 上面配置这个简单数据源一般用于测试,因为它不是一个数据库连接池,知识一个很简单数据库连接应用。...在更多时候,我们需要使用第三方数据库连接,比如使用 C3P0数据库连接池: <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource

    68940

    代码审计:BlueCMS v1.6

    而这个代码基本上可以说是没有任何防护直接将传递字符串带入到了SQL语句进行查询,而在这之前,文件开始,会包含一个common.inc.php文件, ? 我们跟进看一下。...magic_quotes_gpc函数在php作用是判断解析用户提示数据包括有:post、get、cookie过来数据增加转义字符“\”,以确保这些数据不会引起程序,特别是数据库语句因为特殊字符引起污染而出现致命错误...如果没有开启gpc,对_GET、_POST、_COOKIES、_REQUEST使用deep_addslashes()函数过滤一遍,那么我们跟踪一下这个函数,在PHPSTORM,选中函数使用Ctrl+B...可以看到就是调用addslashes() 函数去过滤传递过来值。 addslashes() 函数返回在预定义字符之前添加反斜杠字符串。...而getone函数,也仅仅是一个数据库查询使用,并无其他过滤 ? 那么这样一个SQL注入也就出来了。唯一要注意是其输出,是在注释里面的: echo "<!

    1.9K40

    Go 编码建议——风格篇

    省略结构零值字段 声明零值结构使用 var 初始化结构引用 6.2 初始化 map 6.2 初始化 slice 6.3 变量申明 短变量声明 最小化作用域 就近申明 6.4 避免使用 init(...IDE 在保存代码时可设置自动执行 gofmt, GoLand Settings > Tools > File Watchers 可勾选 go fmt 并指定作用范围。...panic 处理 在业务逻辑处理禁止使用 panic 在 main 包只有当完全不可运行情况可使用 panic,例如:文件无法打开,数据库无法连接导致程序无法正常运行 对于其它包,可导出接口一定不能有...panic 在包内传递错误时,不推荐使用 panic 来传递 error // 不推荐为传递 error 而在包内使用 panic。...() panic(44) //手动抛出panic } // getOne 模拟 slice 越界 runtime 运行时抛出 panic func getOne() { defer

    1.1K50

    Controller 层编码规范

    如果只是将Controller内容解开,@RestController则将Controller内容解析器视图解法,或者将配置方法重新设置为返回使用HTML格式方法,或者返回解析器返回常用方法...mediaType``@ResponseBody 使用@Controller注释解,在方法上,查看解析器可以解析返回jsp,html页面,跳转到相应页面;若返回json等内容到页面,则需要加@ResponseBody...方式传递使用`@RequestBody`数据时(JSON字符串数据请求体数据);GET方式无请求体,所以接收端不能使用GET方式提交数据,只是可以用同一个POST方式进行提交。...4)请求参数 参数参数 使用注意解说@Validated,有特色自动评测开始了,它是spring-contex中性注释解说; vo类自定义标注,比如@NotNull下等,他是javaxvalidation-api...注解这里不赘述; 程序表示验证。

    39520

    4 行代码写 3 个NPE异常,服了!

    需求很简单,把从第三方拉取数据匹配到自身公司后台设置渠道后,聚合到一个列表,批量入库。...然而就在匹配逻辑,上线后报了个NPE,这是作为一名中级开发不应犯简单错误,新人被我狠狠训了,记生产事故一次。...// 后台设置渠道 String channelNo = channelDao.getOne().getChannelNo(); // 第三方拉取数据 List thirdDataList...解决办法 1、使用防御性编程,提前返回(需根据具体业务场景而定) // 如果channelNo是方法逻辑执行必须元素,推荐用此方法 Channel channel = channelDao.getOne...(); if (channel == null) {     return; } 2、使用三目运算,返回空字符串("") // 返回兜底空字符串 String channelNo = channelDao.getOne

    25210

    【实战】Tp5+小程序(三)--微信登录与令牌

    9-1 初识 Token - 意义与作用 说明:目前这种情况下,用户只要知道了系统接口形式,就可以直接访问,并获取数据,而大多数情况下,我们需要对用户身份进行验证,:需要用户登录后才能访问接口,...9-3 实现 Token 身份权限体系 1.获取 token 请求使用 post 方法[安全性方面考虑] 2.将复杂业务分层到service层[实现分层思想] 使用模型处理数据库 CRUD 相关操作...= "http://mypro.com/api/v1/"; (2)在登录方法获取 code // 在小程序登录调用wx.login()方法输出code,然后使用接口请求工具将code作为post请求参数...,所以所有图片之间一定存在一定顺序,其中imgs数组下数据存在order排序字段,如何对imgs数据通过order进行排序?...,使用用户信息,应当是当前登录用户信息,而不能是客户端传递用户信息参数[可能传递有误,导致误操作到其他用户地址信息] 实现一定程度上接口保护。

    8.6K52

    代码审计:BlueCMS v1.6

    = deep_addslashes($_COOKIES); $_REQUEST = deep_addslashes($_REQUEST); } magic_quotes_gpc函数在php作用是判断解析用户提示数据...,包括有:post、get、cookie过来数据增加转义字符“\”,以确保这些数据不会引起程序,特别是数据库语句因为特殊字符引起污染而出现致命错误 如果没有开启gpc,对_GET、_POST、_...$ad_id); getone()是自定义函数,getone()方法位于/include/mysql.class.php第61行,作用是执行SQL语句并输出 function getone($sql,...$ad_id先判断参数是否为空,如果不为空再使用trim()函数去除首尾空格,没有经过任何其他过滤,因而存在SQL注入漏洞 还有一个有意思点,查询结果是经过一系列判断后输出到了html代码注释...ad_id=1 union select 1,2,3,4,5,6,7 ''' 页面回显空白,查看源码看到只有7显示到界面,所以显示位在源码,因此后面只能在源码查看显示信息 ''' #查看数据库 view-source

    2.7K20

    SpringBoot之JPA

    前言:用Spring全家桶,大家常用应该是jpa,上次我看过一次调查统计,歪果人使用持久化框架jpa比较多,目前国内已知互联网公司mybatis会比较多,可能大家都觉得mybatis查询效率更高。...SpringData JPA只是SpringData一个子模块,JPA是一套标准接口,而Hibernate是JPA实现,SpringData JPA 底层默认实现是使用Hibernate,SpringDataJPA...只要我们接口实现这个接口,那么我们就相当于在使用SpringDataJPA了。 Spring Data存储库抽象中央接口是Repository。它将域类以及域类ID类型作为类型参数进行管理。...此接口主要用作标记接口,用于捕获要使用类型,并帮助您发现扩展此接口接口。该CrudRepository规定对于正在管理实体类复杂CRUD功能。...PagingAndSortingRepository抽象添加了额外方法来简化对实体分页访问 public interface PagingAndSortingRepository extends

    1.5K30
    领券