Понякога искаме да изтрием елемент от масив от състояния в компонент на React.
В тази статия ще разгледаме как да изтриете елемент от масив от състояния в компонент на React.
Изтриване на елемент от масив със състояние в компонент на React
Можем да върнем нов масив в рамките на обратното извикване на функцията за настройка на състояние, за да променим масива на състоянието на React компонент.
Например, можем да напишем:
import React, { useState } from "react";
export default function App() {
const [names, setNames] = useState(["jane", "john", "james"]);
return (
<div className="App">
<button
onClick={() =>
setNames((names) => names.filter((_, i) => i !== names.length - 1))
}
>
delete
</button>
<div>{names.join(", ")}</div>
</div>
);
}
Имаме масива със състояния names, който създадохме с useState.
След това имаме бутон, който има onClick prop, зададен на функция, която извиква setNames с обратно извикване, което връща names масива без последния елемент.
Премахваме последния елемент от върнатия масив, като извикваме filter с обратно извикване, което проверява дали i не е names.length — 1.
Това ще актуализира масива names с масива, върнат от filter.
И под това изобразяваме names записите в низ.
Сега, когато щракнем върху бутона, виждаме премахнато фамилното име в низа.
Заключение
Можем да върнем нов масив в рамките на обратното извикване на функцията за настройка на състояние, за да променим масива на състоянието на React компонент.
