小编Sam*_*ham的帖子

在我的Api服务中,我有这个简单的getUsers函数来获取api上的所有用户.

public getUsers(url: string): Observable<IUser[]>  {
  return this._http.get(url);
} 

这是我的IUser界面,我现在已将所有字段设为可选.

export interface IUser {
  id?: string;
  first_name?: string;
  last_name?: string;
  location?: string;
  followers?: string;
  following?: string;
  checkins?: string;
  image?: string;
}

以下是我在组件中使用该服务的方法:

export class SocialOverviewContainerComponent implements OnInit {
  public userData = [];
  public showForm = {};
  private _apiService: ApiService;

  constructor(apiService: ApiService) {
    this._apiService = apiService
  }

  public ngOnInit(): void {
    this.getUsersData();
  }

  public getUsersData()  {
    this._apiService.getUsers(ApiSettings.apiBasepath + 'users/')
      .subscribe(users => {
        this.userData = users;
    })
  }
}

这是我编译时得到的Type错误 …

这是我第一次在项目中正确使用 React Hooks，所以如果我不在那里，请耐心等待。

在下面的组件中，我的目标是显示<HelperTooltip>加载时，当滚动 div（不是窗口）滚动时，我想在滚动 X 像素后隐藏。

我的思考过程是在滚动<div/>元素上创建一个 useRef 对象，然后我可以添加一个事件侦听回调函数，然后可以切换状态以隐藏<HelperTooltip>

我在下面创建了一个 Codesandbox 来尝试演示我正在尝试做的事情。正如您在演示中看到的那样，node.addEventListener('click')它工作正常，但是当我尝试调用node.addEventListener('scroll')它时，它并没有触发。

我不确定我是否采取了错误的方法，任何帮助将不胜感激。在 codeandbox 演示中，它是我试图在滚动时隐藏的反应图像，而不是<HelperTooltip>

CodeSandbox 链接：https ://codesandbox.io/s/zxj322ln24

import React, { useRef, useCallback, useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const App = props => {
  const [isLogoActive, toggleLogo] = useState(true);

  const scrollElementRef = useCallback(node => {
    node.addEventListener("click", event => {
      console.log("clicked", event);
    });

    /* 
      I want to add the scroll event listener 
      here and …

所以我试图订阅一个从本地JSON文件返回数据的简单服务.

我已经设法使服务工作,我可以在函数中注销它,但是当我在angular 2组件中订阅服务时,它总是未定义的.我不知道为什么？任何帮助将非常感激.

API服务

export class ApiService {
   public data: any;

   constructor(private _http: Http) {
   }

   getData(): any {
       return this._http.get('api.json').map((response: Response) => { 
       console.log('in response', response.json()); //This logs the Object
       this.data = response.json();
       return this.data;
   })
   .catch(this.handleError);
   }
}

零件

export class AppComponent {
   public data: any
   public informationData;

   constructor(private _api: ApiService) {}

   public ngOnInit(): void {
      console.log(this.getDataFromService()); // This return undefined
   }

   public getDataFromService() {
      this._api.getData().subscribe(response => {
          this.informationData = response;
          return this.informationData;
      });
   }
}

我正在为演示应用程序构建一个简单的忘记密码表单，该表单由一个TextFormFields和一个组成，FloatingActionButton用于提交数据。我已经意识到FloatingActionButton没有禁用布尔状态，所以我想尝试通过_isValid: true/ false根据TextFormField验证函数更改状态来复制它，然后我可以放置一些三元运算符FloatingActionButton来更改颜色和功能，取决于此小部件的状态。

您将能够看到我_autoValidate在挂载小部件时设置为 true，然后我尝试在_validateForgetEmail函数中触发 UI 重新加载。当我触发这些状态更改时，我收到一个很大的 UI 错误说

??? EXCEPTION CAUGHT BY WIDGETS LIBRARY ????????????????????????????????????????????????????????????
flutter: The following assertion was thrown building Form-[LabeledGlobalKey<FormState>#0a40e](dirty, state:
flutter: FormState#59216):
flutter: setState() or markNeedsBuild() called during build.
flutter: This ForgotPasswordForm widget cannot be marked as needing to build because the framework is already
flutter: in the process of building widgets. A widget can be marked as needing …

我正在尝试测试一个简单的存储库类，该类使用依赖注入的 Dio 包进行网络调用。Http.post 的要求是将 Map 对象发送到标头为 的 URL 'Content-Type': 'application/json。您可以在下面看到这一点：

class AuthenticateUserRemoteDataSourceImpl
    implements AuthenticateUserRepository {
  final Dio httpClient;

  AuthenticateUserRemoteDataSourceImpl({@required this.httpClient});

  @override
  Future<Either<Failure, AuthenticateUser>> getAuthenticateUser(
      String email, String password) async {
    final url = 'API_URL';

    final Map<String, String> jsonPayload = {
      "email": email,
      "password": password
    };

    Response response = await httpClient.post('{$url}api/users/authenticate',
        data: jsonPayload,
        options: Options(headers: {'Content-Type': 'application/json'}));
  }
}

我试图确保单元测试涵盖此方法，但是我很难使用 Dio 包验证命名参数。我可以验证是否dioClient.post确实被调用，但是，我在模拟“数据”和“选项”的名称参数时遇到了麻烦。

我想测试它是否被Map<String, String>正文调用，而且我想测试发送的标头，我想检查它是否被调用{'Content-Type': 'application/json'}。当我需要对经过身份验证的 dio get/post/put 请求进行单元测试时，这也很有用。

这是我迄今为止进行的测试，正如之前提到的，我可以验证模拟函数是否被调用，但不能验证名称参数。

  group('getAuthenticateUser', () {
    final tResponse …