Реакция: Статический метод всегда возвращает неопределенное

Question

У меня проблема со статическим методом в React с использованием ESLint с конфигурацией airbnb.У меня есть такая служба, которая используется для создания пользователя в моей системе и получения всех значений полей для формы создания пользователя.Сервис выглядит так:

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 для создания моей формы.Этот контроллер получает сервис через его свойства.Контроллер выглядит так:

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 всегда возвращает неопределенное значение.

Если я удаляю static изgetFormFields() в моем сервисе и позвоните ему, используя const formFields = createUserService.getFormFields();, он работает нормально, но тогда ESLint жалуется на ESLint: Expected 'this' to be used by class method 'getFormFields'. (class-methods-use-this).

У кого-нибудь есть идеи, как решить эту проблему?

Answer 1

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

Должен сделать свое дело!Обратите внимание, что статическая функция вызывается с использованием имени класса.Вам также придется импортировать его правильно (я не знаю ваш путь ...)