Reactjs 加载实体webId配置文件时出现响应钩子错误

我正在尝试使用的

react组件

从其

webId

加载用户的配置文件。我遇到了

useLDflex（）

的问题。这个问题似乎和React挂钩有关，但我想不出来。我的目标是在页面加载时加载用户的配置文件；愿意做出任何必要的改变。我用MobX来表示状态

下面是代码，下面是编译器/web浏览器中的错误。多谢各位

代码（React/JSX/TypeScript）：

---

不能在类组件内使用React挂钩，请参见此处：

因此，您需要使用Mobx将其重写为

功能组件

，或者制作一个

高阶组件

，并将道具传递到类组件中（当您的类太复杂而无法重写时）

• 使用FC：

• 临时的

const with name=（Component）=>（{profileId}）=>{
const name=useLDflex（“…”）；
返回
}
使用名称导出默认值（配置文件）；

将此组件转换为

功能组件

。因为

useLDflex

是一个自定义钩子，而钩子只在functionalSolved内部使用。使用此处发布的HOC解决方案：您能填写FC代码的注释部分吗？我还是不明白。导出和返回在哪里？它与类组件“导出默认帖子”和“返回…”相同，我无法理解。在这里发布了一个新问题：已解决。使用HOC的解决方案发布在此处：

    import React from 'react';    // 16.14.0
    import { observer } from 'mobx-react';
    import { observable } from 'mobx';
    import { useLDflex } from '@solid/react';    // 1.10.0

    @observer
    export class Profile extends React.Component<{profileId: string}, {}> {
        @observable webId = `https://${this.props.profileId}.solidcommunity.net/profile/card#me`;
        @observable name = useLDflex(`[${this.webId}`)[0];

        render() {
            return (
                <main role="Profile">
                    <div className="container">
                        webId: https://{this.props.profileId}.solidcommunity.net/profile/card#me
                        Name: {this.name}
                    </div>
                </main>
            )
        }
    }

src/components/profile/index.tsx
  Line 9:24:  React Hook "useLDflex" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function  react-hooks/rules-of-hooks

Search for the keywords to learn more about each error.

import {observer} from "mobx-react";

const Profile = observer(({ profileId }) => {
  // ...
  const name = useLDflex(`...`);
  // ...
})

const withName = (Component) => ({ profileId }) => {
  const name = useLDflex('...');
  return <Component name={name} profileId={profileId} />
}
export default withName(Profile);