小编Dim*_*fst的帖子

我REACT-STATELESS-COMPONENT在带有TypeScript的项目中有一个。它有一个错误，说，

Missing return type on function.eslint(@typescript-eslint/explicit-function-return-type)

我不确定它要我做什么。这是我的代码：

import React, { Fragment} from 'react';
import IProp from 'dto/IProp';

export interface Props {
  prop?: IProp;
}

const Component = <T extends object>({ prop }: Props & T) => (
  <Fragment>
    {prop? (
      <Fragment>
        Some Component content..
      </Fragment>
    ) : null}
  </Fragment>
);

LicenseInfo.defaultProps: {};

export default Component;

你能告诉我我需要做什么。我需要阅读有关TS的信息，但目前我根本不了解它。我现在不能这样做。

在一个非常大的混合 TS/JS 项目中，使用 VSCode，我得到以下错误。

Cannot find module 'shared/common/enums/httpMethod'.ts(2307)

应用程序构建成功，我们pre-commit运行 eslint 和测试的钩子没有失败。

这发生在.ts我导入.ts文件的所有文件中。我在这个问题上找到了几个答案，但都没有帮助。

到目前为止，我所做的包括：

1. 从版本的底部状态栏中更改 VSCode 中 TypeScript 的工作区版本。
2. vscode.d.ts使用此命令链接node_modules 中的文件 ln -s /home/work/mymodule/node_modules/vscode.d.ts /usr/share/code/resources/app/out/vs/vscode.d.ts
3. NPM 安装，甚至删除 node_modules 并重新启动 VSCode

这是.tsconfig我们使用的文件。偶尔在团队中，其他成员会收到此错误，但在npm install重新启动 VSCode 之后他们就好了。

{
  "compilerOptions": {
    "baseUrl": "./src",
    "jsx": "react",
    // Target latest version of ECMAScript.
    "target": "esnext",
    // Search under node_modules for non-relative imports.
    "moduleResolution": "node",
    // Process & infer types from .js files.
    "allowJs": true,
    // Don't …

我想访问我的 React-Select 元素值并将其作为 OnSubmit 函数中的值传递并添加到从 formik 收集的值中。

我有一个在 Formik 中创建的多元素表单。我在模态中访问此表单。在表单中，我可以username, email, password很好地访问表单元素的值。Code Below：

  handleSubmit = (values,) => {
    const { onSuccess } = this.props;
    console.log(values);
    onSuccess(values);
  };

我还有一个 React-Select 组件，我用一个label和一value对加载了一些数据。

我想将选定的值添加到来自 fomrik 的值列表中。下面的回复，给了我这个信息。

  selectOnChangeCallback = response => {
    // eslint-disable-next-line no-console
    console.log('selectOnChangeCallback', response);
  };

我的 React 选择组件：

                  <ReactSelect
                    isMulti={false}
                    options={selectData}
                    onChangeCallback={this.selectOnChangeCallback}
                  />

我在 Modal 中访问它，使用这个函数：

  closeCreateUserModal = response => {
    this.setState({ isCreateUserModalOpen: false });
    // eslint-disable-next-line
    this.props.notify({
      message: `User ${response.username} was added …

我正在尝试测试我的功能ComponentDidMount。但我收到此错误：Cannot destructure property params on null or undefined.

我要测试的功能是这个：

  componentDidMount() {
    this.fetchUser();
  }

它取决于这个：

  fetchUser = () => {
    getUser(this.getUserUsername()).then(username => {
      this.setState({
        user: username.data
      });
    });
  };

作为回报取决于这个：

  getUserUsername = () => {
    const { match } = this.props;
    const { params } = match;
    console.log(params, 'params'); // return an object { username: "john" }
    console.log(match, 'match');
    **// return an object
    // { isExact: true
    //  params:
    // username: "john" .
    // __proto__: Object
    // …

我有一个承诺，当我为特定用户获取数据时，我使用它来设置状态。下面是代码：

getUserUsername = (): string => {
    const { match } = this.props;
    return match.params.username;
  };

  onFetchUser = () =>
    getUser(this.getUserUsername())
      .then(username => {
        if (this.hasBeenMounted) {
          this.setState({
            user: username.data // The error is here.
          });
        }
      })
      .catch((errorResponse: HttpResponseObj | null = null) => {
        if (this.hasBeenMounted) {
          this.setState({
            isLoading: false,
            user: null,
            errorMessage: errorResponse
          });
        }
      });

但我收到这个 TS 错误说：

Property 'data' does not exist on type 'void | AxiosResponse<IUser>'.
  Property 'data' does not exist on type 'void'.ts(2339) …

要在componentDidMount()React生命周期方法上测试要调用的函数时该怎么办。基本上，组件代码如下所示：

  state = {
    randomStateToPopulate: []
  };

  // Test componentDidMount
  componentDidMount() {
    this.randomFunction();
  }

  randomFunction= () => {
    listRandomData().then(({ data }) => {
      this.setState({ randomStateToPopulate: data });
    });
  };

那么，您如何实际测试这种情况？

我有一个小功能，用于检查用户名是否唯一。见下文：

export const validateUsername = value =>
  listUsers({ once: true }).then(({ data }) => {
    if (Array.isArray(data) && data.find(userData => userData.username === value)) {
      // eslint-disable-next-line no-throw-literal
      throw 'Username already exists';
    }
  });

我想为它写一些测试。但我收到这个错误

Received value must be a function, but instead "undefined" was found

你能向我解释什么是错的。我的意思是，这是一个异步函数，当时它是未定义的，但不确定它想让我做什么。

  it('Accept the data if the passed userName is unique', async () => {
    expect(await validateUsername('Username is unique')).not.toThrow();
  });

我有一个DTO，用于通过其键之一进行映射

DTO和SecurityMode枚举：

enum SecurityMode {
  mode1 = 'mode1’,
  mode2 = 'mode2’,
  mode3 = 'mode3’
}

export default SecurityMode;

import SecurityMode from 'shared/common/enums/SecurityMode';

export default interface IAuthUser {
  security: Record<SecurityMode, boolean>;
}

错误：

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Record<SecurityMode, boolean>'.
  No index signature with a parameter of type 'string' was found on type 'Record<SecurityMode, boolean>'.ts(7053)

这是代码的一部分，出现错误：

{user && user.security && user.security[securityKey] && ( // The error is …

假设我们必须迭代 anObject或 an Array of Objects。我想将对象转换为一个对象的数组，然后在我的 React 应用程序中进行迭代，以呈现我想要的内容。

举个例子：

// Returned value as object
const zoo = {
  lion: '',
  panda: '',
};

// I want to transform it into Array of 1 Object
const zoo = [{
  lion: '',
  panda: '',
}];

我怎么能做到这一点，但前提是返回的值还不是一个数组？

我知道这个答案已经得到了一些回答，但答案并没有解决我的问题，因此是我的问题。

我们有一个网站，直到最近才使用 Hugo 和 Google Analytics。它运行良好，这里是运行良好的代码：

baseurl: "https://XXXXXX.com/"
languageCode: "en-us"
title: "XXXXXXXXXXXXXXXXXXX"
theme: XXXXXXXX-hugo-theme
MetaDataFormat: "yaml"
pluralizelisttitles: false
permalinks:
  blog: /blog/:year/:month/:slug
params:
  googleAnalyticsID: "UA-XXXXXXXX-X"

我们使用的是 Hugo 0.21 版。在我们升级到 Hugo 0.48 后，GA 停止工作。我不知道出了什么问题。如果您检查该网站，您将找不到该脚本，但该脚本可用于我的代码。

谁能给我一些建议。此外，另一个细节，我们的 GA 密钥是在构建生产时通过 Jenkins 作业注入的。不知道这是否有帮助，但在升级之前我们没有任何问题。

我有一个下拉选择组件。该组件显示我们从服务器获取的元素的值。在以下架构中：

[
  {label: 1, value: 1},
  {label: 2, value: 2},
  {label: 3, value: 3},
]

我正在使用 Formik 并映射数据，以获取值。问题是，我没有占位符值，因此用户认为该值已被选中。

我正在阅读 formik 示例，但我没有创建任何类似的东西。

这是一个工作示例，来自 formik 示例

我试图强制占位符作为一种选择，但这不起作用。有任何想法吗？

          <div className="py-3">
              <label>
                <span className="font-weight-bold">Select Group</span>
                <span className="text-danger">*</span>
              </label>
              <Field
                name="group"
                component="select"
                placeholder="Select Group (Just one)"
                className={classNames('form-control', {
                  'is-invalid': errors.group && touched.group
                })}
              >
                {groups.map(group => (
                  <option key={group.label} value={group.value}>
                    {group.value}
                  </option>
                ))}
              </Field>
              {errors.group && touched.group ? (
                <div className="text-danger">{errors.group}</div>
              ) : null}
            </div>

目前，组具有从服务器返回的第一项的初始值。

我想显示占位符，就像上面的代码一样。这个placeholder="Select Group (Just one)"

我正在使用带有反应的打字稿，但出现此错误。

Cannot invoke an object which is possibly 'undefined'.ts(2722)
const onChange: ((...args: any[]) => any) | undefined

这是我收到错误的代码。

interface FilterGroupsProps {
  data?: any[];
  selectedGroups?: any[];
  onChange?: (...args: any[]) => any;
}

// Inside the class
  onClick = (groupName: string) => (event: MouseEvent<HTMLButtonElement>) => {
    const { onChange } = this.props;
    event.preventDefault();
    onChange(groupName);
  };

//Inside the render:
          {allUniqueGroups.map((group: string) => (
            <a
              key={group}
              className="dropdown-item d-flex justify-content-between align-items-center"
              href="#"
              onClick={this.onClick(group)}
            >

我对此错误的不理解如下：呈现此 onClick 时，groupName 应该可用。

这意味着我有点困惑我的安全案例应该在哪里处理。你能在这里解释一下这个问题吗？以及为我提供解决此问题的方法。