ESLint - ReactJS 中没有未使用的表达式答案

【问题标题】：ESLint - no-unused-expressions in ReactJSESLint - ReactJS 中没有未使用的表达式
【发布时间】：2019-02-15 21:27:16
【问题描述】：

使用 babel 编译时遇到 ESLint 错误：

第 28 行：应为赋值或函数调用，但看到的是表达式 no-unused-expressions
第 29 行：应为赋值或函数调用，但看到的是表达式 no-unused-expressions

知道如何在使计时器仍按预期工作的同时摆脱这些问题吗？或者你有更好的方法让我做计时器吗？

class RequestTimer extends Component {
    constructor(props) {
        super(props);

        this.state = {
            seconds: 0,
            minutes: 0,
            hours: 0
        }

        this.getTime = this.getTime.bind(this);
    }    

    getTime() {
        let second = this.state.seconds
        let minute = this.state.minutes;
        let hour = this.state.hours; 

        this.state.seconds % 59 === 0 && this.state.seconds !== 0 ? minute += 1:null;
        this.state.minutes % 59 === 0 && this.state.seconds % 59 === 0 && this.state.minutes !== 0 ? (hour += 1, minute = 0):null;

        this.setState({
            seconds: second +=1,
            minutes: minute,
            hours: hour
        })
    }

    componentDidMount() {
        this.timer = setInterval(this.getTime, 1000)
    }

    render() {
        return (
            <TimerContainer>
                <h2>Last Request:</h2>
                <p>{this.state.hours}h {this.state.minutes}m {this.state.seconds % 60}s</p>                
            </TimerContainer>
        )
    }
}

【问题讨论】：

标签： javascript reactjs refactoring eslint

【解决方案1】：

有几个解决方案。

1.) 只需使用 文件顶部的 eslint-disable 禁用整个文件的规则。

/* eslint-disable no-unused-expressions */

2.) 你应该在所有行(28,29) 的末尾写下下面的代码，这样它就被禁用了。

/* eslint-disable-line */

【讨论】：

你的答案没有错，但你采取了错误的方法。而不是禁用规则。你应该去重构代码。

【解决方案2】：

您想使用正确的if 语句：

getTime() {
    let second = this.state.seconds
    let minute = this.state.minutes;
    let hour = this.state.hours; 

    if (this.state.seconds % 59 === 0 && this.state.seconds !== 0) {
        minute += 1;
    }
    if (this.state.minutes % 59 === 0 && this.state.seconds % 59 === 0 && this.state.minutes !== 0) {
        hour += 1;
        minute = 0;
    }

    this.setState({
        seconds: second +=1,
        minutes: minute,
        hours: hour
    });
}

如果您不想对结果值做任何事情，请不要使用三元运算符。尤其是当您没有else 大小写或必须使用逗号运算符执行多项操作时，您不应该使用它。

【讨论】：

【解决方案3】：

或者将三元运算修改为具有左侧表达式。改变这个：

this.state.seconds % 59 === 0 && this.state.seconds !== 0 ? minute += 1:null;

到这里：

minute = this.state.seconds % 59 === 0 && this.state.seconds !== 0 ? minute + 1:null;

【讨论】：