Почему я получаю ESLint — компонент должен быть написан как чистая функция?

Я получаю эту ошибку eslint, только для компонента приложения. Компонент должен быть написан как чистая функция, и я не уверен, почему.

Я проверил другие сообщения с этой ошибкой, и ни одно из решений не работает.

import React from "react";
import { Switch, Route } from "react-router-dom";
import NotFound from "../Pages/Standalone/NotFoundDedicated";
import Auth from "./Auth";
import Application from "./Application";

import LoginDedicated from "../Pages/Standalone/LoginDedicated";
import ArticleNews from "./ArticleNews";
import ThemeWrapper, { AppContext } from "./ThemeWrapper";
window.__MUI_USE_NEXT_TYPOGRAPHY_VARIANTS__ = true;

class App extends React.Component {
  render() {
    return (
      <ThemeWrapper>
        <AppContext.Consumer>
          {changeMode => (
            <Switch>
              <Route path="/" exact component={LoginDedicated} />
              <Route
                path="/app"
                render={props => <Application {...props} changeMode={changeMode} />}
              />
              <Route
                path="/blog"
                render={props => <ArticleNews {...props} changeMode={changeMode} />}
              />
              <Route component={Auth} />
              <Route component={NotFound} />
            </Switch>
          )}
        </AppContext.Consumer>
      </ThemeWrapper>
    );
  }
}

export default App;

reactjs javascript eslint eslint-config-airbnb
person Adrian Sultu    schedule 09.07.2020    source источник
comment
Это не ошибка, а предупреждение. У вас есть компонент на основе класса, который имеет только рендеринг и никогда не использует this, поэтому вы можете переписать его как функциональный компонент без состояния. function App() { return (/* render return value goes here */)}   -  person Yury Tarabanko    schedule 09.07.2020
comment
Поскольку ваш компонент, похоже, не имеет никаких значений состояния, использование классов считается излишним. Попробуйте преобразовать его в функциональный (чистый) компонент: reactjs.org/docs/components-and -props.html   -  person Treycos    schedule 09.07.2020

Ответы (1)


arrow_upward
-1
arrow_downward

Ваш компонент не содержит состояния, но вы используете форму, которая поддерживает состояние. Расширение React.Component связано с некоторыми накладными расходами, которых в данном случае можно избежать.

Просто измените свой класс, чтобы он выглядел как

function App(props) {
    return (
        <ThemeWrapper>
        <AppContext.Consumer>
          {changeMode => (
            <Switch>
              <Route path="/" exact component={LoginDedicated} />
              <Route
                path="/app"
                render={props => <Application {...props} changeMode={changeMode} />}
              />
              <Route
                path="/blog"
                render={props => <ArticleNews {...props} changeMode={changeMode} />}
              />
              <Route component={Auth} />
              <Route component={NotFound} />
            </Switch>
          )}
        </AppContext.Consumer>
      </ThemeWrapper>
    );
}
person Deadron    schedule 09.07.2020