Я использую Preact (для всех целей и задач, React), чтобы отобразить список элементов, сохраненных в массиве состояний. У каждого элемента есть кнопка удаления рядом с ним. Моя проблема: при нажатии кнопки правильный элемент удаляется (я проверил это несколько раз), но элементы повторно отображаются с отсутствующим элементом last, а удаленный все еще есть. Мой код (упрощенный):
import { h, Component } from 'preact';
import Package from './package';
export default class Packages extends Component {
constructor(props) {
super(props);
let packages = [
'a',
'b',
'c',
'd',
'e'
];
this.setState({packages: packages});
}
render () {
let packages = this.state.packages.map((tracking, i) => {
return (
<div className="package" key={i}>
<button onClick={this.removePackage.bind(this, tracking)}>X</button>
<Package tracking={tracking} />
</div>
);
});
return(
<div>
<div className="title">Packages</div>
<div className="packages">{packages}</div>
</div>
);
}
removePackage(tracking) {
this.setState({packages: this.state.packages.filter(e => e !== tracking)});
}
}
Что я делаю неправильно? Нужно ли мне как-то активно пересматривать? Является ли это случаем n + 1 как-то?
Разъяснение. Моя проблема заключается не в синхронности состояния. В приведенном выше списке, если я выбираю удалить 'c', состояние корректно обновляется до ['a','b','d','e']
, но отображаемые компоненты ['a','b','c','d']
. При каждом вызове removePackage
правильный шаблон удаляется из массива, отображается правильное состояние, но отображается неправильный список. (Я удалил инструкции console.log
, так что это не похоже, что это моя проблема).