javascript - react : Static method always returns undefined

Question

我在使用带有airbnb配置的ESLint的React中的静态方法时遇到问题。我有一个这样的服务，它既用于在我的系统中创建用户，又用于获取创建用户表单的所有字段值。该服务如下所示:

import axios from 'axios';

import ServiceException from './ServiceException';

class CreateUserServiceException extends ServiceException {}

class CreateUserService {
  constructor(config) {
    this.apiUrl = config.API_URL;
    this.userDomain = config.USER_DOMAIN;
  }

  static getFormFields() {
    return [
      {
        id: 'username',
        type: 'text',
        title: 'E-postadress',
        placeholder: 'Användarnamn',
        mandatory: true,
        extra: '',
      },
      {
        id: 'password',
        type: 'password',
        title: 'Lösenord',
        placeholder: 'Lösenord',
        mandatory: true,
        extra: '',
      },
    ];
  }

  async createUser(data) {
    try {
      await axios.post(`${this.apiUrl}/users/${this.userDomain}`, data, { withCredentials: true });
    } catch ({ response }) {
      throw new CreateUserServiceException(
        response.status, 'Failed to create user', response.data,
      );
    }
  }
}

export default CreateUserService;

我还有一个 jsx Controller 来创建我的表单。该 Controller 通过其属性获取服务。 Controller 看起来像这样:

import React from 'react';

import './index.css';

class CreateUserController extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      formFields: [],
      userData: {},
    };

    this.onCreate = this.onCreate.bind(this);
    this.onLoad = this.onLoad.bind(this);
  }

  async componentDidMount() {
    await this.onLoad();
  }

  async onLoad() {
    const { createUserService } = await this.props;
    const { getFormFields } = createUserService;
    const formFields = getFormFields || []; // ALWAYS RETURNS UNDEFINED
    const userData = {};

    console.log(formFields); // ALWAYS DISPLAYS []

    formFields.forEach((field) => {
      userData[field.id] = '';
    });

    this.setState({ formFields, userData });
  }

  async onCreate(e) {
    e.preventDefault();

    const { userData } = this.state;
    console.log(userData);
  }

  render() {
    const { userData, formFields } = this.state;

    return (
      <section className="create-user-controller">
        <h1>Skapa ny användare</h1>
        <form
          className="centered-container"
          action=""
          noValidate
          onSubmit={this.onCreate}
        >
          <table>
            <tbody>
              {formFields.map(field => (
                <tr key={field.id}>
                  <td>{field.title}</td>
                  <td>
                    <input
                      value={userData[field.id]}
                      onChange={e => this.setState({
                        userData: { ...userData, [field.id]: e.target.value },
                      })}
                      className={`create-${field.id}`}
                      name={field.id}
                      placeholder={field.placeholder}
                      type={field.type}
                    />
                  </td>
                  <td>{field.extra}</td>
                </tr>
              ))}
              <tr>
                <td colSpan={3}>* obligatoriskt</td>
              </tr>
            </tbody>
          </table>
          <input type="submit" className="btn btn-green" value="Skapa användare" />
        </form>
      </section>
    );
  }
}

export default CreateUserController;

我的问题是 const formFields = getFormFields || []; 始终变为 []，这意味着 getFormFields 始终返回未定义。

如果我从服务中的 getFormFields() 中删除 static 并使用 const formFields = createUserService.getFormFields(); 调用它，它就可以工作很好，但是 ESLint 提示 ESLint: Expected 'this' to be use by class method 'getFormFields'。 (类方法使用这个)。

有人知道如何解决这个问题吗？

Answer 1

import CreateUserService from './CreateUserService';
...
async onLoad() {
    ...
    const formFields = CreateUserService.getFormFields() || [];
    ...
}

应该可以解决问题! 请注意，静态函数是使用类名调用的。 Tou 还必须正确导入它(我不知道你的路径......)