Reactjs 在React中有条件地执行useContext

我希望有条件地调用useContext。这是我的原始代码，它运行正常，但tslint失败

调用UserSourceScope的组件-说Component1

定义用户资源范围的组件-比如组件2

定义用户资源范围的组件-比如组件2

从'preact'导入{createContext}；
从'preact/hooks'导入{useContext}；
export const ResourceScopeContext=createContext（未定义）；
导出函数UserResourceScope（inputResources？：ResourceScope）：ResourceScope{
const placeholder context=createContext（{foo:'bar'}）；
const createdContext=inputResources？占位符上下文：ResourceScopeContext；
const resources=useContext（createdContext如有）；
if（输入资源）{
返回输入资源；
}
如果（！资源）{
抛出新错误(
“错误消息”
);
}
返回任何资源；
}

您能建议我如何在不破坏tslint错误的情况下解决此错误吗？

首先，请阅读粗体文本：

只在顶层调用钩子

不要在循环、条件或嵌套函数中调用钩子

---

也就是说，

您可以有条件地使用它的返回值，而不是有条件地调用钩子吗

从“react”导入{useffect}；
导出函数useSubscribeListItemStore(
输入资源？：资源范围
) {
const contextResources=useResourceScope（）；
const resources=inputResources | | contextResources；
const listItemStore=resources.consume（listItemStoreKey）；
useffect（函数subscribeListItemStore（）{
//做些逻辑分析
}, []);
}

谢谢你的建议。我尝试过这样做，但它给了我相同的运行时错误-UncaughtTypeError：当我单击按钮时，无法读取undefined的属性“context”。错误源于行const resources=useContext（ResourceScopeContext）；在组件树的上面有上下文提供程序吗？你是对的，我没有。但是，如果不更改上下文提供程序使其在组件树上可用，我是否可以在const resources=useContext（ResourceScopeContext）中进行更改；为了不导致错误？我不会使用这里返回的资源。我可以像我最初的尝试一样传入inputResources并让它返回，我只希望它不会导致错误。嗯，我不太确定你在问什么。

useContext

钩子仅在其提供者的React组件树中较低的组件中工作。右！我很抱歉说得不清楚。我在问-我能不能不使用thisResource=useContext（不会导致错误的东西）；请让我知道，如果这没有意义，我可以回去学习。

import { useEffect } from 'react';

export function useSubscribeListItemStore(
  inputResources?: ResourceScope
) {
  const resources = inputResources || useResourceScope();
  const listItemStore = resources.consume(listItemStoreKey);
  
  useEffect(function subscribeListItemStore() {
    // do some logic
  }, []);
}

import { createContext } from 'preact';
import { useContext } from 'preact/hooks';

export const ResourceScopeContext = createContext<ResourceScope | undefined>(undefined);

export function useResourceScope(): ResourceScope {
  const resources = useContext(ResourceScopeContext);
  if (!resources) {
    throw new Error(
      'error message'
    );
  }
  return resources;
}

import { useEffect } from 'react';

export function useSubscribeListItemStore(
  inputResources?: ResourceScope
) {
  const resources = useResourceScope(inputResources);
  const listItemStore = resources.consume(listItemStoreKey);
  
  useEffect(function subscribeListItemStore() {
    // do some logic
  }, []);
}

import { createContext } from 'preact';
import { useContext } from 'preact/hooks';

export const ResourceScopeContext = createContext<ResourceScope | undefined>(undefined);

export function useResourceScope(inputResources?: ResourceScope): ResourceScope {
  const PlaceHolderContext = createContext({ foo: 'bar' });
  const createdContext = inputResources ? PlaceHolderContext : ResourceScopeContext;

  const resources = useContext(createdContext as any);

  if (inputResources) {
    return inputResources;
  }

  if (!resources) {
    throw new Error(
      'error message'
    );
  }
  return resources as any;
}