Question

我是React上下文的新手，一切进展顺利。但是，在将上下文导入功能组件并使用@Resolver(() => BlogEntity) export class BlogResolver { constructor( private readonly blogService: BlogService, private readonly articlesService: ArticlesService) {} @Query(() => String) async helloBlog(): Promise<string> { return 'Hello blog'; } @ResolveProperty('posts', () => ArticleEntity) async getPosts(): Promise<ArticleEntity[]> { return await this.articlesService.findAll(); } @ResolveProperty('projects', () => ArticleEntity) async getProjects(): Promise<ArticleEntity[]> { return await this.articlesService.findAll(); } @ResolveProperty('tutorials', () => ArticleEntity) async getTutorials(): Promise<ArticleEntity[]> { return await this.articlesService.findAll(); } }之后，我已经传递了在提供程序值内部传递的所有值。

这是我的提供者

useContext

所以在这里我必须传递所有四个变量和函数。

<UserContext.Provider value={[login, checkPhoneNumber, updatePhoneNumber, getUseInfo]}>
  {props.children}
</UserContext.Provider>

但是在某些情况下，我只需要传递const [login, checkPhoneNumber, updatePhoneNumber, getUseInfo] = useContext(UserContext);之类的功能，而如果我删除其他功能，则它不起作用。

Answer 1

传递一个对象

，而不是传递Provider值的数组

<UserContext.Provider value={{login, checkPhoneNumber, updatePhoneNumber, getUseInfo}}>

然后您可以使用对象分解来访问所需的许多传递方法

const {login} = useContext(UserContext);

或

const {login, checkPhoneNumber, updatePhoneNumber, getUseInfo} = useContext(UserContext);

Answer 2

您可以为不需要的任何功能传递null

  const [null, null, null, getUseInfo] = useContext(UserContext);

希望这会有所帮助。

您一次getUseInfo与getUserInfo的拼写错误也已

Answer 3

除了上面提到的Shmili Breuer所说的，您可能还可以做类似的事情：

  const [,,, getUseInfo] = useContext(UserContext);

基本示例显示破坏的工作原理，因为这就是您真正在做的事情：

var a =[1,2,3,4,5];
var [,,three,,] = a;
console.log("THREE: ", three);

如何仅从React上下文导入我需要的功能

3 个答案: