React项目中ESLint no-shadow规则hoist:never设置无效求助

Let's break down why you're seeing this warning and walk through actionable fixes:

Why the Warning Pops Up #

The core issue is a name collision: you’ve imported the login action creator at the top of your file, and then you’re using the same login name for a prop when destructuring the component’s parameters. ESLint’s no-shadow rule flags this because the prop-level login is "shadowing" the module-level imported login (they share the same name across different scopes).

Your earlier tweak to the hoist setting didn’t resolve the problem because that option only affects how ESLint handles shadowing for hoisted variables (like those declared with var). This is a direct name clash between an import and a function parameter—hoist behavior doesn’t apply here.

Solutions to Fix the Warning #

1. Rename the Prop During Destructuring

The quickest fix is to alias the prop when you destructure it, avoiding the name conflict entirely:

// Rename the login prop to loginUser in the component parameters
const SignIn = ({ login: loginUser, history }) => {
  // ... rest of your component code
  
  const handleSubmit = e => {
    e.preventDefault();
    // Use the renamed prop to call the login action
    loginUser(form, history);
  };
  
  // ... rest of your component JSX
};

2. Alias the Action in connect

You can also rename the action when passing it to connect, so the resulting prop has a unique name:

// Keep the import, but alias the action in connect
export default connect(
  null,
  // Map the login action to a prop named loginUser
  { loginUser: login }
)(SignIn);

// Use the aliased prop in your component
const SignIn = ({ loginUser, history }) => {
  // ...
  loginUser(form, history);
  // ...
};

3. Skip the Separate Import (Cleanest Approach)

You don’t actually need to import the login action at the top if you’re passing it directly to connect. The connect function handles binding the action to dispatch automatically, so you can remove the import entirely:

// Delete this line: import { login } from '../../redux/auth/actions';

// Keep connect configured as-is—login will be passed as a prop without conflicts
export default connect(
  null,
  { login }
)(SignIn);

// Now the only "login" in scope is the prop, no shadowing
const SignIn = ({ login, history }) => {
  // ...
  login(form, history);
  // ...
};

4. Allow the Shadow in ESLint (Least Recommended)

If you really want to keep the same name, you can add login to the allow array in your no-shadow rule to tell ESLint to ignore this specific case:

{
  "rules": {
    "no-shadow": [
      "error",
      {
        "builtinGlobals": false,
        "hoist": "never",
        "allow": ["login"]
      }
    ]
  }
}

Note: This isn’t ideal because shadowing variables can make code harder to read and debug later on.

内容的提问来源于stack exchange，提问作者Shawn