Реагировать на изменение состояния в экземпляре сгенерированного компонента map () - PullRequest
Новая
       12

Реагировать на изменение состояния в экземпляре сгенерированного компонента map ()

0 голосов
/ 13 мая 2018

Вопрос о 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>
                )
            }
        )
    )
}

Каждый созданный таймер имеет свое собственное состояние со значением мс.

Когда я запускаю другой таймер или удаляю задачу, предыдущий компонент таймера должен вызывать свой собственный Stop () метод.

Скриншот:
enter image description here

Скриншот этого контекста для каждого сгенерированного экземпляра:
https://i.stack.imgur.com/9vdEq.png

Я пытался контролировать каждый экземпляр от родителя и держать миллисекунды в родительском, но он запускает все таймеры одновременно. Также я пытался использовать Mobx , но я сдался, так как я не уверен, смогу ли я сделать это с этим шаблоном.

Мне нужен совет, как вызывать метод stop () внутри этого компонента Timer

UPD: я наконец решил это с помощью ссылок. Идентификатор задачи генерируется библиотекой unique-html, поэтому в Parent я добавил это в 

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

и вызовите этот метод в Parent от child: 

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

Но появился новый - теперь, когда я запускаю таймер 3 и удаляю 2-е задание - дочернее состояние переходит к следующему экземпляру. Таким образом, таймер применяется к неправильной задаче после удаления.

...