为什么我得到一个预期的赋值或函数调用，却看到了一个表达式？答案

【问题标题】：Why Am I Getting An Expected an Assignment or Function Call and Instead Saw an Expression?为什么我得到一个预期的赋值或函数调用，却看到了一个表达式？
【发布时间】：2019-03-17 06:26:35
【问题描述】：

import React from 'react';
import Login from '../Login/Login';

const Authenticate = App => {
  return class extends React.Component {
    constructor() {
      super();
      this.state = {
        loggedIn: false
      };
    }
    componentDidMount() {
      localStorage.getItem('username') ?
        this.setState({
          loggedIn: true
        }) :
        null;
    }

    render() {
      return this.state.loggedIn === false ? < Login / > : < App / > ;
    }
  };
};

export default Authenticate;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

/src/components/Authentication/Authenticate.js 第 13 行：期望一个赋值或函数调用，而是看到一个表达式 no-unused-expressions 搜索关键字以了解有关每个错误的更多信息。

【问题讨论】：

你真的可以这样写 JSX 吗？我认为它需要是<Login /> 和<App />。另外，为什么会滥用条件运算符？在componentDidMount 中使用if。
出于某种原因，我认为“整洁”添加了一些奇怪的间距......我一般不会这样间隔。
哦，这是一个eslint错误，不是语法错误。使用if 语句将修复它。
我将它重构为一个 if 语句，仍然得到同样的错误.. 很奇怪..
请显示您将其更改为的内容。

标签： javascript reactjs

【解决方案1】：

您可以通过更改componentDidMount 中的代码来解决此问题：

componentDidMount() {
    this.setState({
      loggedIn: localStorage.getItem('username') ? true : false
    })
}

或者如果你不想设置状态：

componentDidMount() {
    if(localStorage.getItem('username'))
       this.setState({
         loggedIn: true
       })
}

此错误的主要原因是 ESLint，更具体地说是 Ternary 规则 specified here。

Disallow Unused Expressions 规则及其 allowTernary 选项不允许这样做：

一个？乙：0

一个？ b : c()

然而这是允许的：

一个？ b() : c()

一个？ (b = c) : d()

这是Repl with it rendering without the error

【讨论】：

成功了，谢谢！其他方式不起作用的任何原因？仅供参考。

【解决方案2】：

不能像你那样使用三元运算符，而是像下面那样使用

  componentDidMount() {
      if(localStorage.getItem('username')){
           this.setState({
              loggedIn: true
           }) 
      }
  }

渲染部分可以进行如下修正。虽然这不是强制性的，但是像下面这样将所有状态或道具分配给 const 而不是在渲染中多次调用 this.state 和布尔相等性检查不应该像 === false 只是使用！是最佳实践

 render() {
    const { loggedIn } = this.state;
     return (
          <div>
              {!loggedIn ? < Login / > : < App / > }
           </div>
      )
 }

或者在 React v16 中这样称呼它

   render() {
    const { loggedIn } = this.state;
     return (
          <React.Fragment>
              {!loggedIn ? < Login / > : < App / > }
           </React.Fragment>
      )
 }

【讨论】：

它们可以这样使用； ESLint 规则只是抱怨。另外，render() 不需要更改。
我提出了更好的渲染部分方法

【解决方案3】：

componentDidMount() {
        if(localStorage.getItem('username')){
    this.setState({loggedIn:true})
  }
    }

这完美解决了，谢谢大家的帮助。

【讨论】：