ESlint: Компонент должен быть написан как ошибка чистой функции, когда я создаю компонент класса с использованием приставки - PullRequest
Новая
       20

ESlint: Компонент должен быть написан как ошибка чистой функции, когда я создаю компонент класса с использованием приставки

0 голосов
/ 01 декабря 2018

Я пишу компонент класса реагирования в своем проекте «Реактивный».Я использую ESLint в своем проекте, расширяя правила syb для airbnb.

Этот компонент имеет форму, которая хранит значения формы в Redux.Он инициализирует значения формы из Redux и обновляет их с помощью создателя действия (называемого employeeUpdate), который импортируется в файл.В этом случае мне не нужны никакие методы жизненного цикла или конструктор в моем компоненте.

Проблема в том, что ESLint жалуется, что я должен писать этот компонент как чистую функцию.Я не могу написать его как чистую функцию, так как он потребляет состояние от Redux в качестве реквизита.Это конкретная ошибка:

[eslint] Компонент должен быть написан как чистая функция

Вот мой код: 

import React, { Component } from 'react';
import { Picker, Text } from 'react-native';
import { connect } from 'react-redux';
import { Card, CardSection, Input, Button } from './common';
import { employeeUpdate } from '../actions';

const styles = {
  pickerTextStyle: {
    fontSize: 18,
    paddingLeft: 20
  }
};

class EmployeeCreate extends Component {
  render() {
    const { name, phone, shift, employeeUpdate } = this.props;

    return (
      <Card>
        <CardSection>
          <Input
            label="Name"
            placeholder="Jane"
            value={name}
            onChangeText={value => employeeUpdate({ prop: 'name', value })}
          />
        </CardSection>
        <CardSection>
          <Input
            label="Phone"
            placeholder="555-555-5555"
            value={phone}
            onChangeText={value => employeeUpdate({ prop: 'phone', value })}
          />
        </CardSection>
        <CardSection style={{ flexDirection: 'column' }}>
          <Text style={styles.pickerTextStyle}>Shift</Text>
          <Picker
            selectedValue={shift}
            onValueChange={value => employeeUpdate({ prop: 'shift', value })}
            style={{ flex: 1 }}
          >
            <Picker.Item label="Monday" value="Monday" />
            <Picker.Item label="Tuesday" value="Tuesday" />
            <Picker.Item label="Wednesday" value="Wednesday" />
            <Picker.Item label="Thursday" value="Thursday" />
            <Picker.Item label="Friday" value="Friday" />
            <Picker.Item label="Saturday" value="Saturday" />
            <Picker.Item label="Sunday" value="Sunday" />
          </Picker>
        </CardSection>
        <CardSection>
          <Button>Create</Button>
        </CardSection>
      </Card>
    );
  }
}

const mapStateToProps = state => {
  const { name, phone, shift } = state.employeeForm;
  return { name, phone, shift };
};

export default connect(
  mapStateToProps,
  { employeeUpdate }
)(EmployeeCreate);

Я попробовал написать его как чистую функцию (код ниже), но когда я деструктурировал создателя действия, ESLint снова пожаловался, что мой создатель действия ужеобъявлен (так как он был импортирован в начало файла) 

import React from 'react';
import { Picker, Text } from 'react-native';
import { connect } from 'react-redux';
import { Card, CardSection, Input, Button } from './common';
import { employeeUpdate } from '../actions';

const styles = {
  pickerTextStyle: {
    fontSize: 18,
    paddingLeft: 20
  }
};

const EmployeeCreate = ({ name, phone, shift, employeeUpdate }) => (
  <Card>
    <CardSection>
      <Input
        label="Name"
        placeholder="Jane"
        value={name}
        onChangeText={value => employeeUpdate({ prop: 'name', value })}
      />
    </CardSection>
    <CardSection>
      <Input
        label="Phone"
        placeholder="555-555-5555"
        value={phone}
        onChangeText={value => employeeUpdate({ prop: 'phone', value })}
      />
    </CardSection>
    <CardSection style={{ flexDirection: 'column' }}>
      <Text style={styles.pickerTextStyle}>Shift</Text>
      <Picker
        selectedValue={shift}
        onValueChange={value => employeeUpdate({ prop: 'shift', value })}
        style={{ flex: 1 }}
      >
        <Picker.Item label="Monday" value="Monday" />
        <Picker.Item label="Tuesday" value="Tuesday" />
        <Picker.Item label="Wednesday" value="Wednesday" />
        <Picker.Item label="Thursday" value="Thursday" />
        <Picker.Item label="Friday" value="Friday" />
        <Picker.Item label="Saturday" value="Saturday" />
        <Picker.Item label="Sunday" value="Sunday" />
      </Picker>
    </CardSection>
    <CardSection>
      <Button>Create</Button>
    </CardSection>
  </Card>
);

const mapStateToProps = state => {
  const { name, phone, shift } = state.employeeForm;
  return { name, phone, shift };
};

export default connect(
  mapStateToProps,
  { employeeUpdate }
)(EmployeeCreate);

Есть ли способ обойти эту проблему?Могу ли я не писать его как компонент класса React, не использовать какие-либо методы жизненного цикла и не получать никаких ошибок от ESLint?

Примечание :

  1. Я знаю, что яможет отключить правило, но я хочу, чтобы ESLint предупреждал меня об этом в других компонентах моего проекта.
  2. Возможно, создатель действий можно импортировать под другим псевдонимом, но тогда я все еще не думаю, что это лучший способнапишите мои компоненты.

1 Ответ

0 голосов
/ 01 декабря 2018

Если вам не нужны методы состояния или жизненного цикла, вам нужно использовать чистую функцию.

Я вижу 2 способа исправить ваш код:

  1. Использовать другой файлдля подключения.Круто отделить в одном файле jsx с вашим чистым компонентом и использовать другой для соединения реквизита и создателей действий.

  2. Если вы предпочитаете, чтобы все было в одном файле, вы всегда можете переименоватьВаша опора:компонента, и здесь нет повторяющегося объявления.

    PS: На самом деле, с помощью хуков чистые функции всегда могут быть полезны.

...