javascript - 期望一个赋值或函数调用，而是在 React 中看到一个表达式

问题描述

我正在 React 中创建一个计数器，并在 onclick 事件中执行如下操作：

我有以下代码：

import React , {Component} from "react";
import Counter from './counter';
class Counters extends  Component{
    state = {
        counters : [
        {id: 1  , value : 10 },
        {id: 2  , value : 20 },
        {id: 3  , value : 30 },
        {id: 4  , value : 40 }
    ],
    }

    handleIncrement=(counter)=>{
         var counters_temp = [...this.state.counters];
        var counters_temp=counters_temp.map((c)=>{
           c.id===counter.id?c.value++ : c;
            return(c);
        });
        this.setState({counters : counters_temp});
    }
      render(){
        return(
            <div>
                {this.state.counters.map((counter)=>
                    <Counter 
                    onIncrement = {this.handleIncrement}
                    counter = {counter}
                    id = {counter.id}
                    >  
                    </Counter>
                )}
            </div>
        );
    }
}
export default Counters;

handleIncrement 函数给出以下错误。“期望一个赋值或函数调用，而是看到一个表达式”。如果我在 javascript 文件中编写一个独立的similarhandleIncrement 代码，它运行良好。此外，如果注释掉： c.id===counter.id?c.value++ : c;并写：

handleIncrement=(counter)=>{
        var counters_temp = [...this.state.counters];
        var counters_temp=counters_temp.map((c)=>{
        //c.id===counter.id?c.value++ : c;
            return(c);
        });
        this.setState({counters : counters_temp});
    }

那么没有编译错误，但它也不能解决我的目的。子组件计数器如下所示：

import React , {Component} from "react";
class Counter extends Component{
   render(){
       return(
           <div>
              <span class="badge badge-warning">{"Zero"}</span> 
              <button onClick = {()=>this.props.onIncrement(this.props.counter)} type="button" class="btn btn-secondary">Increment</button>  

           </div>
       );
   }
}
export default Counter;

为什么呢？

标签： javascriptreactjsfrontend

javascript - 期望一个赋值或函数调用，而是在 React 中看到一个表达式

问题描述

解决方案

推荐阅读