小编css*_*n25的帖子

我正在构建一个带有订阅的 Angular 应用程序。该组件是一个聊天消息页面，其中有一个菜单，其中包含您向其他人发送的所有聊天消息，您可以单击每个人以查看与该人的聊天消息。这是我的组件内的函数之一

getAllChatMessages() {

  this.chatService
    .getChatMessages(this.currentChatId, this.otherUserId)
    .takeUntil(this.ngUnsubscribe)
    .subscribe(userProfile => {
      //some logic here
    });
}

getAllChatMessages()现在，每次用户单击正在与他们聊天的不同人时，都会调用此函数。因此，在这种情况下，订阅会被一遍又一遍地调用，尽管使用的是不同的this.currentChatId和this.otherUserId。仅takeUntil当组件被销毁时才能取消订阅。

我真正不清楚的是旧订阅是否仍然存在，而它的另一个实例在下一次调用时实例化getAllChatMessages()。getAllChatMessages()由于每个订阅持有不同的资源，我是否应该在每次调用时取消订阅旧订阅？

编辑：

如果我确实需要清除旧订阅，我可能会考虑这样的事情？这样，在每次后续调用中，我都会从上次调用中删除并取消订阅getAllChatMessages().

getAllChatMessages() {
  if (this.getChatMsgSub) {
    this.getChatMsgSub.unsubscribe();
  }

  this.getChatMsgSub = this.chatService
    .getChatMessages(this.currentChatId, this.otherUserId)
    .takeUntil(this.ngUnsubscribe)
    .subscribe(userProfile => {
      //some logic here
    });
  }

我正在使用 Enzyme/Jest 为我的容器帽子上的函数编写测试，该测试是通过复选框组件的 onChange 触发的。我正在尝试模拟“更改”，但是，不知何故，“更改”并未触发要调用的 onChange 函数。不确定这里发生了什么......我试图将模拟更改为“点击”，删除了目标对象，但它仍然无法正常工作。

容器

export class Data extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      data_list_api: [],
      selected_data: this.props.dataForm,
    };

  }

handleCheck = (event) => {
    const newSelectedData = Object.assign({}, this.state.selected_data);
    if (newSelectedData[event.target.name]) {
      delete newSelectedData[event.target.name];
    } else {
      newSelectedData[event.target.name] = [true, event.target.id];
    }
    this.setState({ selected_data: newSelectedData });
  }

render() {
    const dataOptions = this.state.data_list_api.map((val, index) => (
      <div className="form-group no-margin" key={index}>
        <div className="col-md-12">
          <div className="checkbox">
            <Checkbox
              name={val.data_name}
              id={val.data_id}
              onChange={this.handleCheck}
              checked={this.state.selected_datas[val.data_name] ? true : false} …

我对 Typescript 有点陌生，我可以对 90% 的代码库进行打字。但当谈到休息/传播运算符时，我绝对不知所措。我今天在我们的代码中遇到了这个（我没有写这个），但我确实发现它不起作用：

interface searchClient {
  searchForValues({
    name,
    query,
    ...qp,
  }: {
    name: string;
    query: string;
    qp: QpInterface;  //???this part doesn't work
  }): Promise<any>;
 }

interface QpInterface {
  page?: number;
  hits?: number;
  attributes?: string;
}

它不起作用，因为qp在键入中指定键的名称，而我想要键入的是部分...qp。中的每个键/值对...qp均由 QpInterface 键入。

这是一个示例函数调用：

this.searchClient.searchForValues({
  name: 'title',
  query: 'little sheep',
  page: 5,
  hits: 2
});

我在文档中找不到太多相关内容。我尝试过推杆...qp: QpInterface;，但...QpInterface;没有成功。...qp输入参数的最佳方式是什么？