React js 在 map（） 生成的组件实例中更改状态

问：

来自新手的关于 React 16 的问题。

反应 v16。我正在对任务进行map（）。每个任务都有自己的计时器组件。

父母：

render(props)
{
    return (
        this.props.tasks.tasks.map((task, id) = >
        {
            return (
                <div key={id} className="task" data-id={task.id}>
                    <div className="task-description">{ task.task }</div>
                    <Timer
                        onRemove={this.props.onRemove} 
                        whereToEdit={this.props.whereToEdit} 
                        id={task.id}       
                        handleTimer={this.handleTimer}
                    />
                    </div>
                )
            }
        )
    )
}

每个创建的计时器都有自己的状态和 ms 值。

当我启动另一个计时器或删除任务时，前一个计时器组件应调用自己的 Stop（） 方法。

截图：

每个生成的实例的此上下文的屏幕截图：

我试图从父级控制每个实例并将毫秒保留在父级中，但它同时启动所有计时器。我也尝试过使用 Mobx，但我放弃了，因为我不确定我是否可以用这种模式来做到这一点。

我需要建议如何在此 Timer 组件中调用方法 stop（）

UPD：我终于用refs解决了这个问题。 任务 ID 是由 unique-html 库生成的，因此在 Parent 中，我将其添加到

onRef={ref => (this[`example${task.id}`] = ref)}

并在 Parent from child 中调用此方法：

start (thisId) {
        if (this.state.runningId !== thisId && this.state.runningId !== "") {
            this[`example${this.state.runningId}`].stop(thisId);
        } 
        this.setState({runningId: thisId});
}

但是出现了新的 - 现在当我启动计时器 3 并删除第二个任务时 - 子状态移动到下一个实例。因此，计时器适用于删除后的错误任务。