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

解决了它。问题是当配置文件从固态服务器加载时，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);