首页
学习
活动
专区
工具
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>组件来获取并展示这些额外的数据。

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

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

相关·内容

使用Django中的Session和Cookie来传递数据

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

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

    前言 大家好 我是歌谣 今天对于自己的项目做个详细的总结 背景 为了更好的进行前后端的设计开发 后端目前用postgrest设计数据库 前端直接使用react-admin和material ui...就是图中的左中右三块 涉及的局部知识点 弹性布局代码 的页面中插入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 *

    35730

    自用后台的快速开发

    前言 工作中,很多自己维护的系统需要开发后台管理系统,这类系统大多在内网使用,进行简单的数据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 包。...使用元数据 如果你希望自己处理编译过程,那么可能会对元数据做更多的处理。...为了简单说明 % 的用法,我将已收集到的所有的元数据和它的本体一起输出到一个文件中。这样,后续的编译过程可以直接使用这个文件来获得所有的项和你希望关心它的所有元数据。

    30310

    SpringBoot单元测试(实例)

    SpringBoot单元测试实例 测试实例 1、创建基于Spring Data JPA的Web应用ch9_2 2、由于我springBoot是2.4.4,需要额外引入JUnit 3、配置数据库连接等基本属性...1、创建基于Spring Data JPA的Web应用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注入数据权限,不需要额外增加类似${},这对开发者并不友好这不是随意设计的玩意,技术和脚手架会稳定更新

    54450

    面向初学者的高阶组件教程

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

    66710

    脚手架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可以让读到的缓存与数据库一致,却会改变开发者正常的写法,试想一下,读到了数据库的缓存,

    39900

    基于 React + Umijs + Nest 全栈开发的后台系统

    系统功能设计 动态国际化语言配置 记录登录用户的 CURD 操作日志 用户和角色权限的一对一映射,根据角色关联的菜单权限生成动态路由菜单 登录用户发布消息公告,后端使用 SSE 推送,可登录多个用户查看效果...前端常见的一些实用的业务功能或者一些有趣的效果 环境和依赖 推荐本项目使用 pnpm 包管理工具node (Node.js 版本要求 16.x 以上,这里推荐 18.x 及以上) Pnpm (推荐最新版本...(Mysql版本为8.x) Redis 项目运行 1、 安装 Mysql 并导入 /mysql/xmw_admin.sql 文件,修改 /Xmw_server/.development.env 文件中的数据库配置...= react-admin 2、 拉取项目代码 git clone https://github.com/baiwumm/react-admin.git cd react-admin // 进入前端...在菜单 系统管理-菜单管理 中按照规则添加菜单,可打开多个标签页参考,路由配置参考:路由 在菜单 系统管理-角色管理 中编辑状态中勾选相应的菜单,保存刷新页面,即可看到路由菜单生效 功能模块 - 登录

    22700

    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

    69240

    代码审计: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...中的注解这里不赘述; 程序表示的验证。

    40520

    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

    25910
    领券