ESLint - no-unused-expressions in ReactJS

自古美人都是妖i 提交于 2020-12-05 12:13:27

问题


Getting a ESLint error when copiling with babel:

  • Line 28: Expected an assignment or function call and instead saw an expression no-unused-expressions

  • Line 29: Expected an assignment or function call and instead saw an expression no-unused-expressions

Any idea how to get rid of these whilst making my timer still work as intended? Or have you got a better way of me doing my timer?

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>
        )
    }
}

回答1:


You want to use a proper if statement:

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
    });
}

Don't use the ternary operator if you don't want to do anything with the result value. And especially you should not use it when you have no else case or when you have to use the comma operator to do multiple things.




回答2:


There are couple of solution.

1.) Just Disable the rule for the entire file using eslint-disable at the top of the file.

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

2.) You should write below code at the end off all lines(28,29) so It's disabled.

/* eslint-disable-line */



回答3:


Alternatively modify the ternary operation to have L.H.S expression

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

Change by

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



来源:https://stackoverflow.com/questions/52274829/eslint-no-unused-expressions-in-reactjs

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!