List 组件中的 React-admin TextField 显示 "null"。我可以将其转换为空白吗？

Question

我是 React 和 react-admin 的新手，所以也许我做错了什么。我的 api returns 来自 MySQL 的记录和空字段被 return 编辑为 "null"。在客户端显示的记录列表中，该字段也显示为"null"。我可以在前端将其翻译成空白，还是 api return 应该是一个空字符串而不是 null？

这是 api 的 json 结果：

{
      "id": 79874,
      "itemNumber": "PUM_10550101-2",
      "amazonSku": null
}

这是列表定义：

export const ItemList = props => (
  <List {...props} filters={<ItemFilter />}>
    <Datagrid rowClick="edit">
      <TextField source="itemNumber" label="Item Number" />
      <TextField source="amazonSku" label="Amazon Sku" />
    </Datagrid>
  </List>
);

这是渲染后的样子：

如果有意义的话，我只想看到空值所在的空白。谢谢

Answer 1

不确定这是否是执行此操作的最佳方法，但创建了一个返回跨度内记录源的新字段（不太确定为什么会这样）：

import React from 'react';

const TextNullableField = ({ record = {}, source }) => {
  return (
    <span>{record[source]}</span>
  );
}
export default TextNullableField;

然后，导入资源js文件，添加到资源中：

  <TextNullableField source="amazonSku" label="Amazon Sku" />

现在，如果从数据库中传入的字段为空，则该字段为空：

Answer 2

这刚刚在 react-admin 版本 3.4.1 中得到修复。

确切的解决方法在这里：https://github.com/marmelab/react-admin/pull/4661

只需将 react-admin 软件包升级到最新版本即可。这通常是 yarn upgrade react-admin.

List 组件中的 React-admin TextField 显示 "null"。我可以将其转换为空白吗？

React-admin TextField in List component shows "null". Can I convert this to blank?

mysql

null

reactjs

react-admin