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

Question

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

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

Answer 1

ваш this.state.counters не имеет какого-либо 'id' в качестве свойства.Я думаю, что вы должны использовать

c.key === counter.key

Также показать компонент счетчика.Это проходит идентификатор?

Answer 2

Попробуйте это

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

Проверьте работу напр.https://jsfiddle.net/0ym96hx1/