useGetOne 响应不会重新呈现组件答案

【问题标题】：useGetOne response doesn't rerender componentuseGetOne 响应不会重新呈现组件
【发布时间】：2020-07-11 22:39:34
【问题描述】：

我对这个简单的示例感到非常沮丧，因为要么我没有得到任何东西，要么它没有按照我期望的方式以及文档中所说的方式工作。

所以我试图扩展 CloneButton 组件以实际检索 Datagrid 每一行上的记录并将其传递给 create 组件：

import React from 'react';
import PropTypes from 'prop-types';
import { CloneButton, useGetOne } from 'react-admin';
import CircularProgress from '@material-ui/core/CircularProgress';

const CloneQueryButton = ({
    label = "Duplicate",
    basePath,
    record,
    ...props
}) => {

const { data, loading, error } = useGetOne(basePath, record.id);

if (loading) { return <CircularProgress />; }
if (error) { return <p>ERROR {error.message}</p>; }

if (data) {
    console.log("inside", data);
    data.name = `Copy of ${data.name}`;
}

console.log("outside", data);

return <CloneButton
    basePath={basePath}
    record={data}
    label={label}
    {...props} />
};

我在控制台上得到的只是outside null 此外，当按下按钮时，它会重定向到带有空 record 属性的创建页面。

我可以看到网络请求，它们都返回有效的 json。我不明白为什么在收到响应时组件显然不会重新呈现。如果有人能看到我错过了什么，我将非常感激！

【问题讨论】：

您是否使用<Resource 标签作为您要获取的类型？
是的，我已将该类型包含在 Resource 标记中。这就是我访问放置按钮的 List 组件的方式。如果没有Resource 标签，请求就不会成功。

标签： reactjs react-hooks react-admin

【解决方案1】：

控制台成功，这意味着既没有error也没有loading。

检查implementation of useGetOne后，如果在你的admin state中基本上没有找到给定名称的资源，它将返回null。

所以我假设您没有在admin's state（又名<Resource name="your name" /> 在<Admin> 树中声明的资源。

onst useGetOne = (
    resource: string,
    id: Identifier,
    options?: any
): UseGetOneHookValue =>
    useQueryWithStore(
        { type: 'getOne', resource, payload: { id } },
        options,
        (state: ReduxState) =>
            state.admin.resources[resource]
                ? state.admin.resources[resource].data[id]
                : null
    );

【讨论】：

dataProvider 实际上确实触发了请求，我在“网络”选项卡中收到了 json 响应，但不知何故 data 仍然为空。
听起来很傻，你能填一个可复制的代码框吗？

【解决方案2】：

我遇到了同样的问题。这是我发现的。

当一个动作被派发时，Redux 会检查状态是否发生了变化。如果状态没有改变，那么它不必更新组件。当 Redux 看不到 state 已经改变时，它不会用 state 中的新数据更新 React 组件。 Reference

返回的数据是相同的 JSON，这就是状态不更新的原因。

解决这个问题的两种方法。

如果您有权访问您的 API，则使用不同的 basePath 创建一个新资源，返回相同的结果。临时修复。不是最好的解决方案。例如：<Resource name="cart" />、<Resource name="cartDetails" />
React 中的清除状态 - 您可以关注这篇文章以获取 clearing state in hooks

【讨论】：