React Hook错误时加载固体webbid配置文件

Question

我试图使用Solid的react-components从他们的webId加载用户的配置文件。我遇到了useLDflex()的问题。问题似乎与React Hooks有关，但我无法弄清楚。我的目标是加载用户的个人资料时，页面加载;愿意做出任何必要的改变。我使用MobX的状态。

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

代码(反应/JSX/打印稿):

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.

Answer 1

你不能在类组件中使用React Hooks，参考:https://reactjs.org/docs/hooks-faq.html#should-i-use-hooks-classes-or-a-mix-of-both

所以你需要用Mobx将其重写为functional component，或使higher order component并将道具传递到你的类组件(当你的类太复杂而无法重写时)

FC:

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);