时间戳

首页 > 解决方案 > 反应管理员：卡在加载状态，即使数据获取成功

rest - 反应管理员：卡在加载状态，即使数据获取成功

问题描述

我有问题<ReferenceField>。

在我的页面上，<List>我有需要参考的行。我想展示和。UserIdToolId
user nametool code

但是这两列卡在加载状态，即使dataProvider,GET_MANY请求成功users和tools。

当我console.log(data)，它的数据都在那里，但不知何故它没有呈现到<ReferenceField>. 并且根本没有记录任何错误。

知道我在做什么错吗？或者发生了什么？

ReferenceFields 仍在加载

编辑：我已经更新了 react-admin，现在它不显示加载栏，但什么也不显示。

这是列表的代码：

export const B_toolList = props => (
    <List {...props}>
        <Datagrid rowClick="edit">
            <TextField source="id" />
            <NumberField source="active" />
            <NumberField source="time" />
            <DateField source="createdAt" />
            <DateField source="updatedAt" />
            <ReferenceField source="UserId" reference="Users">
                <TextField source="name" />
            </ReferenceField>
            <ReferenceField source="ToolId" reference="Tools">
                <TextField source="code" />
            </ReferenceField>            
        </Datagrid>
    </List>
);

我还发现，如果我尝试使用 react-dev-tool 检查 ReferenceField 元素，则没有值，只有“正在加载...”注释。但我不知道为什么……在我看来，API 响应还可以。

API 资源：Btools 获取：

(2) [{…}, {…}]
0:
ToolId: 1
UserId: 1
active: 1
createdAt: "2020-04-08T16:00:03.000Z"
id: 1
time: 1
updatedAt: "2020-04-08T16:00:03.000Z"
__proto__: Object

1:
ToolId: 1
UserId: 2
active: 1
createdAt: "2020-04-08T16:00:03.000Z"
id: 2
time: 1
updatedAt: "2020-04-08T16:00:03.000Z"
__proto__: Object
length: 2
__proto__: Array(0)

比用户和工具获取：

(2) [{…}, {…}]
0: {id: 1, name: "Tomáš Princ", email: "p***@seznam.cz", createdAt: "2020-04-08T15:59:54.000Z", updatedAt: "2020-04-08T15:59:54.000Z"}

1: {id: 2, name: "jhfgjhfg", email: "admin@admin.cz", createdAt: "2020-04-08T18:44:16.000Z", updatedAt: "2020-04-08T18:44:16.000Z"}
length: 2
__proto__: Array(0)

[{…}]
0: {id: 1, code: "guhf", name: "jhfh", state: "ghf", free: 1, …}
length: 1
__proto__: Array(0)

我在 DataProvider 中记录这个 json 数据并像数据一样返回它：json

switch (type) {
            case GET_LIST:
            case GET_MANY:
            case GET_MANY_REFERENCE:
                console.log(json)
                console.log(type)
                if (!headers.has('content-range')) {
                    throw new Error(
                        'The Content-Range header is missing in the HTTP Response. The simple REST data provider expects responses for lists of resources to contain this header with the total number of results to build the pagination. If you are using CORS, did you declare Content-Range in the Access-Control-Expose-Headers header?'
                    );
                }
                console.log((headers.get('content-range')))
                return {

                    data: json,
                    total: 
                    //json.length, 
                    parseInt(
                        headers
                            .get('content-range')
                            .split('/')
                            .pop(),
                        10
                    ),
                };

所以看起来应用程序拥有它需要的所有数据，但由于某种原因仍在加载和等待某些东西。

编辑 2：我通过创建自定义元素尝试了一些解决方法，该元素加载 userId 和 toolId 并获取经典查询通过 ID 为每一行获取用户/工具。有用。

const ToolCode = ({ record = {} }) => {

    const dataProvider = useDataProvider();
    const [tool, setTool] = useState();
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState();
    useEffect(() => {
        dataProvider.getOne('tools', { id: record.ToolId })
            .then(({ data }) => {
                setTool(data);
                setLoading(false);
            })
            .catch(error => {
                setError(error);
                setLoading(false);
            })
    }, []);

    if (loading) return <Loading />;
    if (error) return <Error />;
    if (!tool) return null;
    console.log("fetch tools")
    return (
        tool.code
    )
};

const UserName = ({ record = {} }) => {
    const dataProvider = useDataProvider();
    const [user, setUser] = useState();
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState();
    useEffect(() => {
        dataProvider.getOne('users', { id: record.UserId })
            .then(({ data }) => {
                setUser(data);
                setLoading(false);
            })
            .catch(error => {
                setError(error);
                setLoading(false);
            })
    }, []);

    if (loading) return <Loading />;
    if (error) return <Error />;
    if (!user) return null;

    return (
        user.name
    )
};




const B_toolFilter = (props) => (
    <Filter {...props}>
        <TextInput label="Search" source="q" alwaysOn />
        <TextInput label="Title" source="title" defaultValue="Hello, World!" />
    </Filter>
);


export const B_toolList = props => (
    <List {...props}>
        <Datagrid rowClick="edit">
            <TextField source="id" />
            <NumberField source="active" />
            <NumberField source="time" />
            <DateField source="createdAt" />
            <DateField source="updatedAt" />
            <UserName source="UserId" />
            <ToolCode source="ToolId" />            
        </Datagrid>
    </List>
);

现在我可以通过 B_Tools 中的 ID 获取工具代码和用户名，但它的效率远低于 ReferenceField 使用的 GET_MANY 方法。

标签： restreact-admin

解决方案

净重。一直都是关于工具和用户的大写字母 

     <ReferenceField source="UserId" reference="Users">

和

     <ReferenceField source="ToolId" reference="Tools">

我将其更改为

     <ReferenceField source="UserId" reference="users">

和

     <ReferenceField source="ToolId" reference="tools">

现在它起作用了！我只是仍然不明白为什么它会获取正确的资源......就像它在获取数据时对资本不敏感，但在呈现时却对资本敏感。我不知道。无论如何，我会期待某种带有这样错误的错误消息......不仅仅是正确的响应和空渲染。

推荐阅读