лучшая идея для подсчета

Question

У меня есть список предметов, и мне нужно начать подсчет, когда пользователь нажал на предмет.

Я знаю, как вызвать клик, но как считать?

На данный момент я использую некоторые фальшивые данные в качестве своего состояния, и когда пользователь нажимает на элемент, он начинает отсчет в поле «время».

Может быть, у вас есть идея получше?

Спасибо:)

 all: [
            {name: 'task 1', id: '1', order: 1,time: 0},
            {name: 'task 2', id: '2', order: 2,time: 0},
            {name: 'task 3', id: '3', order: 3,time: 0},
            {name: 'task 4', id: '4', order: 4,time: 0}
        ]


taskClick = (id) => {
    let arr = this.state.all;
    arr.map((task) => {
        if (task.id === id) {
                task.time++;
            }
    });
    this.setState(prevState => ({
        all: prevState.all
    }));
};

handleTaskClick = (id) => {
    setInterval( () => {
        this.taskClick(id)
    },10000)
};

Answer 1

Пусть предмет сам обрабатывает счетчик. В компоненте просто создайте экземпляры подкомпонентов:

 this.state.all.map(task => (<Task task={task} />))

В них вы можете реализовать задачу так:

 class Task extends React.Component {
  state = { count: 0 };

  handleClick = () => {
   this.interval = setInterval(() => this.setState(({ count }) => ({ count: count + 1 })), 1000);
  }

  componentWillUnmount() {
    if(this.interval) clearInterval(this.interval);
  }
  //...
}