计数的更好的主意

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);
  }
  //...
}