'react/no-unused-state' 在 'componentDidMount' 方法中使用状态字段时发出警告

Question

我在我的项目中使用 eslint，但在 'componentDidMount' 方法中使用状态字段时我收到警告 'react/no-unused-state'。它说 'react/no-unused-state'，我找不到解决方案。请帮忙。谢谢。

App.js

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import './App.css';
import Header from './components/header/header.component';
import { auth } from './firebase/firebase.utils';
import Homepage from './pages/homepage/homepage.components';
import ShopPage from './pages/shop/shop.component';
import SignInAndSignOut from './pages/sign-in-and-sign-out-page/sign-in-and-sign-out-page.component';

class App extends React.Component {
  unsubscribeFromAuth = null;

  constructor() {
    super();
    this.state = {
      currentUser: null,  // line 16
    };
  }

  componentDidMount() {
    this.unsubscribeFromAuth = auth.onAuthStateChanged((user) => {
      this.setState({ currentUser: user }); // line 22

      console.log(user);
    });
  }

  componentWillUnmount() {
    this.unsubscribeFromAuth();
  }

  render() {
    return (
      <div>
        <Header />
        <Switch>
          <Route exact path="/" component={Homepage} />
          <Route exact path="/shop" component={ShopPage} />
          <Route exact path="/signin" component={SignInAndSignOut} />
        </Switch>
      </div>
    );
  }
}

export default App;

我收到错误

src\App.js
  Line 16:7:   Unused state field: 'currentUser'  react/no-unused-state
  Line 22:23:  Unused state field: 'currentUser'  react/no-unused-state
Search for the keywords to learn more about each error.

Answer 1

您正在此处 constructor 中设置 state：

constructor() {
    super();
    this.state = {
        currentUser: null,  // Here you're initialising state.
    };
}

您正在此处更新 state：

componentDidMount() {
    this.unsubscribeFromAuth = auth.onAuthStateChanged((user) => {
        this.setState({ currentUser: user }); // Here you're updating state.

        console.log(user);
    });
}

但您实际上从未使用过 state。没有使用它，实际上没有必要拥有它。虽然我假设你打算使用它，如果是这样的话，你需要做的就是在 state 中引用 currentUser，它 eslint error 就会消失

'react/no-unused-state' 在 'componentDidMount' 方法中使用状态字段时发出警告

'react/no-unused-state' warning while the state field is used in 'componentDidMount' method

reactjs

eslint