javascript - 在 map() 生成的组件的实例中反应 js 更改状态

Question

来自新手的关于 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)}

并从子级调用父级中的此方法：

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

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

标签： javascriptreactjstimerthissetinterval