React:高阶组件:Solid useLDflex()

Question

我在React中遇到了一个高阶组件。我正在尝试使用Solid的react-components来用useLDflex()加载用户的配置文件数据。我的代码抛出了一个我无法理解的错误；我不确定这个问题是与React、高阶组件还是Solid的库有关。有人能帮忙吗？

代码(React/TSX)：

import { useLDflex } from '@solid/react';
import React from 'react';
class Profile extends React.Component<{name: string}, {}> {
render() {
return (
<main role="Profile">
<div className="container">
Name: {this.props.name}
</div>
</main>
)
}
}
interface IProfileId {
profileId: string;
}
const withName = (Component: any) => ({profileId}: IProfileId) => {
const webId = `https://${profileId}.solidcommunity.net/profile/card#me`;
const [name, namePending, nameError] = useLDflex(`[${webId}].name`);
return <Component name={name} />
}
export const newProfile = withName(Profile);

错误(在线)：

Error: Specify at least one term when calling .next() on a path

Answer 1

解决了问题。问题是从Solid服务器加载配置文件时，name处于未知/未定义状态。这是工作代码：

import { useLDflexValue } from '@solid/react';
import React from 'react';
class P extends React.Component<{name: string}, {}> {
render() {
return (
<main role="Profile">
<div className="container">
Name: {this.props.name}
</div>
</main>
)
}
}
const withName = (Component: any) => ({profileId}: {profileId: string}) => {
const webId = `https://${profileId}.solidcommunity.net/profile/card#me`;
const name = useLDflexValue(`[${webId}].name`)?.toString() || 'loading...';
return <Component name={name} />
}
export const Profile = withName(P);