时间戳

首页 > 解决方案 > 在“componentDidMount”方法中使用 state 字段时出现“react/no-unused-state”警告

reactjs - 在“componentDidMount”方法中使用 state 字段时出现“react/no-unused-state”警告

问题描述

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

应用程序.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.

标签： reactjseslint

解决方案

你state在constructor这里设置：

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. 不使用它，实际上没有必要拥有它。虽然我假设你打算使用它，如果是这样的话，你需要做的就是参考currentUserinstate并且它eslint error会消失

推荐阅读