使用 ESLint 规则反应 Redux

Question

在将 React 和 Redux 与 Airbnb 风格和 ESlint 规则一起使用时，我主要对解构和上层作用域有一些困惑：

import user from "./userModel";

class MyName extends Component {
  state = { user, size:0 };
render() {
    const {size}=this.state ; 
    const { username, items, location } = this.state.user;
    return (...)}}
MyName.propTypes = {createNewUser: PropTypes.func.isRequired
  // users: PropTypes.object};
const mapStateToProps = state => ({users: state.users});
export default connect(mapStateToProps,{ createNewUser})(MyName);

在解构状态的这段代码中，ESLint 说 Must use destructuring state assignment (react/destructuring-assignment) 当我将其重写为

const {size, user}=this.state ; 
const { username, items, location } = user;

我又收到了

'user' is already declared in the upper scope. (no-shadow)

当我像 const {users}=this.props; 那样解构用户（商店的）时显示相同类型的警告，它说 'users' is missing in props validation (react/prop-types) 当我在 propTypes 中定义它时，它说 object 被禁止

Answer 1

您可以在解构时"rename"变量以防止冲突：

const { size, user: currentUser } = this.state;

从 this.state.user 中获取值并将其分配给 currentUser。

使用 ESLint 规则反应 Redux

React Redux with ESLint rules

reactjs

eslint

redux-thunk

react-redux