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

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

并在父对象和子对象中调用此方法：

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

---

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

您的编码约定表明您的代码相当混乱。为什么不在返回之前使用

const tasks=this.props.tasks.tasks

。您应该尽量使代码尽可能简短，const isRunning=this.state.isRunning也是如此。让你的代码像一首美丽的诗。哦，任务道具对于这个子组件是无用的。它是偶然出现的。父任务组件本身就是任务组件。我最终用refs解决了这个问题。但出现了新的一个-现在当我启动计时器3并删除第二个任务时-子状态移动到下一个实例。因此，计时器在删除后应用于错误的任务，而不是使用

refs

我想我宁愿使用

Booleans

保存状态中的时钟，并将运行状态设置为

this.state.running.find（…进行搜索）

。在这种情况下，无论单击哪个按钮，您都可以通过更改其各自的状态来修改任何时钟的运行

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