reactjs - 如何在我的 UI 表单中增强钩子视图的空状态

Question

当我试图在我的 UI 表单中增强钩子视图的空状态时，视图中没有要显示的钩子，但我试图在行为中看到除“没有搜索项的项目”之外的其他内容。我有点困惑我可以添加什么逻辑来增强空状态。

这是我的代码：

export default class ListHooks extends Component {
  handleCreateHook = () => {
    this.props.history.push('/hooks/create');
  };

  handleHookSearchSubmit = hookSearch => {
    const query = parse(window.location.search.slice(1));

    this.props.history.push({
      search: stringify({
        ...query,
        search: hookSearch,
      }),
    });
  };

  render() {
    const {
      classes,
      description,
      data: { loading, error, hookGroups },
    } = this.props;
    const query = qs.parse(this.props.location.search.slice(1));
    const hookSearch = query.search;
    const tree = hookGroups
      ? hookGroups.map(group => ({
          value: group.hookGroupId,
          nodes: group.hooks.map(hook => ({
            value: hook.hookId,
            href: `/hooks/${group.hookGroupId}/${encodeURIComponent(
              hook.hookId
            )}`,
          })),
        }))
      : [];

    return (
      <Dashboard
        title="Hooks"
        helpView={<HelpView description={description} />}
        search={
          <Search
            placeholder="Hook contains"
            defaultValue={hookSearch}
            onSubmit={this.handleHookSearchSubmit}
          />
        }>
        {!hookGroups && loading && <Spinner loading />}
        <ErrorPanel fixed error={error} />
        {hookGroups && (
          <MuiTreeView
            // key is necessary to expand the list of hook when searching
            key={hookSearch}
            defaultExpanded={Boolean(hookSearch)}
            listItemProps={{ color: classes.listItemProps }}
            searchTerm={hookSearch || null}
            softSearch
            tree={tree}
            onEmptySearch={
              <Typography variant="subtitle1">
                No items for search term {hookSearch}
              </Typography>
            }
            Link={Link}
          />
        )}
        <Button
          spanProps={{ className: classes.actionButton }}
          tooltipProps={{ title: 'Create Hook' }}
          color="secondary"
          variant="round"
          onClick={this.handleCreateHook}>
          <PlusIcon />
        </Button>
      </Dashboard>
    );
  }
}

标签： reactjsreact-hooksstatereact-hook-form