使用redux

Question

我从eslint收到了这个警告，我正在使用create-react-app。

./src/components/auth.js
  Line 24:  Unexpected labeled statement                                           no-labels
  Line 24:  'authenticated:' is defined but never used                             no-unused-labels
  Line 24:  Expected an assignment or function call and instead saw an expression  no-unused-expressions

我认为我的组件在下面没有任何问题，这太烦人了

import React, { Component } from 'react';
import { connect } from 'react-redux';

export default function(ComposedComponent) {
  class Authentication extends Component {

    componentWillMount() {
      if (!this.props.authenticated) {
        this.props.history.replace('/login');
      }
    }

    componentWillUpdate(nextProps) {
      if (!nextProps.authenticated) {
        this.props.history.replace('/login');
      }
    }

    render() {
      return <ComposedComponent {...this.props} />
    }
  }

  return connect(state => {authenticated: state.auth.authenticated})(Authentication);
}

我不知道应该修复什么，第一次使用eslint。

Answer 1

当你写这篇文章时，javascript很困惑。

正在看一个箭头函数返回指令authenticated: state.auth.authenticated这是一个错误的指令。

您可以写下：

connect(state => ({ 
     authenticated: state.auth.authenticated,
}));

我们添加括号来告诉javascript这不是指令而是json。

或者

connect((state) => { 
   return {
     authenticated: state.auth.authenticated,
   };
});