为什么我会收到此 Eslint 警告 - 在我的特殊情况下，预期 'this' 将被 class 方法使用

Question

我学习 React，现在我不明白这个 Eslint 警告。

请有人解释一下 Eslint 文档没有意义我看到其他代码在做我所做的事情但仍然没有警告。

如果我替换此方法中的 switch 语句 getProviders Eslint 警告消失，因此它与 switch??

有关

这是代码：

import React from 'react';
import '../../styles/profile-page-anonymous.css';
import { compose } from 'recompose';
import { withFirebase } from '../../firebase';
import { AuthUserContext, withAuthorization } from '../../session';
import ChangeName from './ChangeName';
import * as ROLES from '../../constants/roles';

class ProfilePageBase extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            displayName: props.authUser.displayName ?? '',
        };
        this.nameChange = this.nameChange.bind(this);
        this.getProviders = this.getProviders.bind(this);
    }

    getProviders(authUser) {
        switch (authUser.providerData[0].providerId) {
            case 'google.com': {
                return authUser.providerData[0].email;
            }
            case 'facebook': {
                return authUser.providerData[0].providerId;
            }
            case 'twitter': {
                return authUser.providerData[0].providerId;
            }
            default:
                return 'non';
        }
    }

    nameChange(displayName) {
        this.setState({
            displayName,
        });
    }

    render() {
        let userDetails;
        const { authUser } = this.props;
        const { displayName } = this.state;
        const providers = this.getProviders(authUser);
        if (authUser) {
            userDetails = (
                <div>
                    <div className="profileAnonymous">
                        <table>
                            <tbody>
                                <tr>
                                    <td>Display name: </td>
                                    <td>{displayName}</td>
                                </tr>
                                <tr>
                                    <td>User ID: </td>
                                    <td>{authUser.uid}</td>
                                </tr>
                                <tr>
                                    <td>Signed in with: </td>
                                    <td>{providers}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div>
                        <h2>Change your display name</h2>
                    </div>
                    <div className="profileBoxChangeName">
                        <ChangeName authUser={authUser} callback={this.nameChange} />
                    </div>
                </div>
            );
        } else {
            userDetails = <p>Unable to get user details. Please try refreshing the page.</p>;
        }

        return <div>{userDetails}</div>;
    }
}

const ProfilePageAuth = props => (
    <AuthUserContext.Consumer>
        {authUser => (
            <div className="profilePageAuthenticated">
                <ProfilePageBase {...props} authUser={authUser} />
            </div>
        )}
    </AuthUserContext.Consumer>
);

const condition = authUser => authUser && authUser.roles.includes(ROLES.USER);

const enhance = compose(withAuthorization(condition), withFirebase);
const ProfilePageAuthenticated = enhance(ProfilePageAuth);

export default ProfilePageAuthenticated;

Answer 1

如果方法与它所附加的实例有关系，那么将方法放在原型上通常是一个很好的设计决策。如果您从不在方法内部引用 this 实例，那么在原型上使用这样的方法有点奇怪，因为它直接与实例。这就是 linter 警告您的内容。

要么忽略 linting 规则，要么考虑将其改为静态方法：

static getProviders(authUser) {

和

const providers = ProfilePageBase.getProviders(authUser);

您也可以将其设为独立函数。

此外，比 switch 更好，请考虑以下内容：

static getProviders(authUser) {
  if (authUser === 'google.com') return authUser.providerData[0].email;
  if (authUser === 'facebook' || authUser === 'twitter') return authUser.providerData[0].providerId;
  return 'non';
}

为什么我会收到此 Eslint 警告 - 在我的特殊情况下，预期 'this' 将被 class 方法使用

Why do I get this Eslint warning - Expected 'this' to be used by class method in my special case

this

reactjs

eslint