小编Gus*_*nça的帖子

我正在使用新的React Context API而不是Redux开发一个新的应用程序,之前,Redux当我需要获取用户列表时,我只需调用componentDidMount我的操作,但现在使用React Context,我的操作就在里面我的消费者在我的渲染函数中,这意味着每次调用我的渲染函数时,它都会调用我的动作来获取我的用户列表,这是不好的,因为我会做很多不必要的请求.

那么,我怎么只能调用一次我的动作,比如componentDidMount不是在渲染中调用？

举个例子,看看这段代码:

让我们假设我将所有内容包装Providers在一个组件中,如下所示:

import React from 'react';

import UserProvider from './UserProvider';
import PostProvider from './PostProvider';

export default class Provider extends React.Component {
  render(){
    return(
      <UserProvider>
        <PostProvider>
          {this.props.children}
        </PostProvider>
      </UserProvider>
    )
  }
}

然后我把这个Provider组件包装成我的所有应用程序,如下所示:

import React from 'react';
import Provider from './providers/Provider';
import { Router } from './Router';

export default class App extends React.Component {
  render() {
    const Component = Router();
    return(
      <Provider>
        <Component />
      </Provider>
    )
  }
} …

我正在使用新的React Context API,我需要从Context.Consumer变量中获取Consumer数据,而不是在render方法中使用它.无论如何我能做到这一点吗？

例如,我想要的是:

console.log(Context.Consumer.value);

到目前为止我测试的内容:上面的例子,测试了Context.Consumer currentValue和Context Consumer所拥有的其他变量,试图将Context.Consumer()作为一个函数执行而没有工作.

有任何想法吗？

假设我有一个有 3 个参数的函数。第一个参数是我定义的枚举，第二个参数是一个对象，其形状基于枚举传递的值。第三个参数只是一个字符串。

看看这个函数：

  async callApi<Response = any, Input = any>(
    op: ApiOperations,
    input: Input,
    functionName: string
  ): Promise<Response> {
    return this.lambda.invoke<Response>(functionName, {
      op,
      input
    });
  }

您可以看到我将此函数声明为通用函数并接收两种类型并将默认值设置为 any 并且有效。但在这种情况下，每当我想调用此函数时，我都必须手动指定输入和响应类型。问题是，我知道对于枚举中的每个值ApiOperations，我只有一种输入类型和一种响应类型。

所以我的问题是，打字稿有什么方法可以根据枚举值推断类型吗？

调用该函数的一个例子是：

  async getChatRooms({ numberResults, siteId, startIndex }: GetChatRoomsInput): Promise<ChatRoom[]> {
    return this.api.callApi<ChatRoom[], GetChatRoomsInput>(ApiOperations.GetChatRooms, {
      siteId,
      numberResults,
      startIndex
    }, 'getChatRooms');
  }

这工作正常，但我想要做的方式是：

  async getChatRooms({ numberResults, siteId, startIndex }: GetChatRoomsInput): Promise<ChatRoom[]> {
    return this.api.callApi(ApiOperations.GetChatRooms, {
      siteId,
      numberResults,
      startIndex
    }, 'getChatRooms');
  }

对于这种情况，打字稿将能够告诉我输入的类型GetChatRoomsInput和ChatRoom[]响应类型。