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

Question

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

React 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中调用此方法：

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

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