在 ReactJS 上获得“期望一个赋值或函数调用，而是看到一个表达式 no-unused-expressions”

Question

我是 React 的新手编程，当我尝试编译我的程序时遇到错误。 出现此问题的原因是，如果单击按钮时发生某种条件，则尝试执行一种方法，如果没有，则尝试执行其他方法（来自父类）。我尝试了多种解决方案，但无法使程序正常运行。

这是子类：

import React, { Component} from 'react';

class Counter extends Component {

    state = {
        count: this.props.value,
        functionDelete: this.props.onDelete,
        elementName: this.props.elementName,
        elementUnitaryPrice: this.props.elementUnitaryPrice,
        textButtonDecrement: this.getTextButtonDecrement(this.props.value),
        styleButtonDecrement: this.getStyleButtonDecrement(this.props.value),
    };

    styles = {
        fontSize: 10,
        fontWeight: "bold"
    };

    render() {

        let classes = this.getStyle();

        return <React.Fragment>
            <tr>
                <td><h5 className="badge">{this.state.elementName}</h5></td>
                <td><span className="badge">{this.state.elementUnitaryPrice}$<span style={this.styles} className={classes}>{this.state.count}</span></span></td>
                <td><button onClick={this.incrementValue} className="btn btn-secondary btn-success">+</button></td>
                <td><button onClick={this.gestionButton} className={this.state.styleButtonDecrement}>{this.state.textButtonDecrement}</button></td>
            </tr>
            </React.Fragment>;
    }

    gestionButton = () => {
        if(this.state.textButtonDecrement==="-"){
            this.decrementValue();
        }else{
            this.onDelete();
        }
    }

    getStyle() {
        let classes = "badge m-2 badge-";
        classes += (this.state.count === 0) ? "warning" : "primary";
        return classes;
    }

    incrementValue = ()=>{
        this.setState({count: this.state.count + 1});
        this.setState({textButtonDecrement: "-"});
        this.setState({styleButtonDecrement: "btn btn-secondary btn-warning"});
    }

    decrementValue = ()=>{
        let value = this.state.count;
        if(!(value<1)){
            this.setState({count: this.state.count - 1});
        }
        console.log(this.state.count);
        if(this.state.count-1<=0){
            this.setState({textButtonDecrement: "Delete"});
            this.setState({styleButtonDecrement: "btn btn-secondary btn-danger"});
        }else{
            this.setState({textButtonDecrement: "-"});
            this.setState({styleButtonDecrement: "btn btn-secondary btn-warning"});
        }
    }

    getTextButtonDecrement(number){
        if(number>0){
            return "-"
        }
        return "Delete";
    }

    getStyleButtonDecrement(number){
        if(number>0){
            return "btn btn-secondary btn-warning";
        }
        return "btn btn-danger";
    }

    onDelete = () =>{
        {this.state.functionDelete};
    }

}
 
export default Counter;

这是父类：

import React, { Component } from 'react';
import Counter from './counter';

class CounterHolder extends Component {
    
    state = {
        counters: [
            {id: 1, value: 0, elementName: "Lechuga", elementUnitaryPrice:"9.99"},
            {id: 2, value: 2, elementName: "Sandia", elementUnitaryPrice:"4.99"},
            {id: 3, value: 0, elementName: "Alita de Pollo", elementUnitaryPrice:"9.99"},
            {id: 4, value: 9, elementName: "Muslo de Pollo", elementUnitaryPrice:"9.54"},
        ]
    };

    handleDelete = ()=>{
        console.log("I am pretty :)")
    }
    
    render() { 
        return (<div><table><tbody>
            {this.state.counters.map(counter => <Counter key={counter.id} onDelete={this.handleDelete} value={counter.value} elementName={counter.elementName} elementUnitaryPrice={counter.elementUnitaryPrice}/>)}
        </tbody></table></div>);
    }
}
 
export default CounterHolder;

Answer 1

我认为这可能是问题所在：

onDelete = () => {
 {this.state.functionDelete};
}

如果您尝试调用您想将其更改为的函数：

onDelete = () => {
  this.state.functionDelete();
}

我看不出有任何理由首先需要处于状态。如果你只是要调用作为道具上交的函数，你可以直接这样做：

gestionButton = () => {
  if(this.state.textButtonDecrement==="-"){
    this.decrementValue();
  }
  else {
    this.props.onDelete();
  }
}