Ожидал присваивания или вызова функции и вместо этого увидел выражение в React

Abhishek_04 спросил: 03 ноября 2018 в 09:22 в: javascript

Я делаю счетчик в 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 выдает следующую ошибку: "Ожидал присваивания или вызова функции и вместо этого увидел выражение". Если я напишу автономный подобный код handleIncrement в файле javascript, он будет работать хорошо. Далее, если закомментировать: 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;

Почему это так?

0 ответов