Есть список, каждый элемент которого является компонентом (Item). Список строится из state родителя (List). Задача в том, чтобы при клике в Item, из state List удалялся соответствующий элемент. Я сделал это так: передал через props onClose функцию удаления в Item и вызывал ее уже оттуда.
И все это даже работало до тех пор, пока не потребовалось вызывать onClose после изменения state Item (внутри setTimeout). Если раскомментировать строку 27 в примере на jsfiddle, то странным образом state Item'а, находящегося под тем, который мы закрываем, меняется.
Живой пример: https://jsfiddle.net/69z2wepo/114657/
Код:
class Item extends React.Component {
constructor(props) {
super(props);
this.state = {
height: 0,
opacity: 0
};
}
componentDidMount() {
setTimeout(() => {
this.setState({height: '500'}, () => {
setTimeout(() => {
this.setState({opacity: 1})
},100)
})
},100)
}
close() {
this.setState({opacity: 0}, () => {
setTimeout(() => {
this.setState({height: 0}, () => {
setTimeout(() => {
// Вот тут и начинается проблема
// this.props.onClose();
},100)
})
},100)
})
}
render() {
return (
<div className="item-wrapper" style={{maxHeight: this.state.height + 'px'}}>
<div className="item" onClick={this.close.bind(this)} style={{opacity: this.state.opacity}}>
{this.props.title}
</div>
</div>
);
}
}
class List extends React.Component {
constructor(props) {
super(props);
this.state = {
items: [
{title: 'zero'},
{title: 'one'},
{title: 'two'},
{title: 'three'},
{title: 'four'},
{title: 'five'},
{title: 'six'},
{title: 'seven'},
{title: 'eight'},
{title: 'nine'},
{title: 'ten'},
]
};
}
// Удаление элемента
delete(item) {
let newItems = this.state.items;
if (newItems.indexOf(item) > -1) {
newItems.splice(newItems.indexOf(item), 1);
this.setState({items: newItems});
}
}
render() {
return (
<div className="list">
{ this.state.items.map((item, i) => {
return (<Item key={i} title={item.title} onClose={this.delete.bind(this, item)} />)
})}
</div>
);
}
}
ReactDOM.render(
<List />,
document.getElementById('root')
);
Буду рад выслушать мнения о том, как это починить. Заранее благодарен.
P.S. Предвосхищая вероятные советы, скажу сразу, что про существование react-transition-group я знаю, но текущий вопрос не в выборе инструментов.