Что делает эта логика в JavaScript?
Я изучаю реакцию и наткнулся на учебник, в котором в JSX добавлена кнопка удаления, и определена функция для выполнения события. Однако я смущен тем, что делает приведенный ниже код.
const deleteList=this.state.list.filter(item=>item.objectID!==id);
В частности, я смущен тем, что означает следующая логика:
(item=>item.objectID!==id);
Мне трудно понять, почему это было непонятно, просто запустив код и прочитав некоторые документы.
Ответы 3
Это похоже на
function(item) {
return item.objectID!==id
}
В основном отфильтруйте все элементы, где id не равен item.objectID
Как это происходит? Я имею в виду, когда id не равен objectID?
В основном ваши данные отображаются из списка массивов, поэтому, когда вы нажимаете кнопку «Удалить», вы хотите удалить этот элемент из списка массивов. Таким образом, вы передаете идентификатор элемента, для которого вы инициировали удаление. Итак, задачи состоят в том, чтобы отфильтровать все элементы, кроме того, на котором вы нажали удалить.
this.state.list.filter(item=>item.objectID!==id);
Эта часть перебирает все элементы в list и возвращает новый массив, содержащий только элементы, соответствующие условию item.objectID!==id
Это общий синтаксис для удаления одного элемента списка.
См. документация метода filter.
Как это происходит? Я имею в виду, когда id не равен objectID?
Для лучшего понимания поясняю на примере. см. приведенный ниже код: -
import React, { Component } from 'react';
class App extends Component {
constructor(props) {
super(props);
this.state = {
list: [
{ id: '1', age: 42 },
{ id: '2', age: 33 },
{ id: '3', age: 68 },
],
};
}
onRemoveItem = id => {
this.setState(state => {
const list = state.list.filter(item => item.objectID !== id);
return {
list,
};
});
};
render() {
return (
<div>
<ul>
{this.state.list.map(item => (
<li key = {item.objectID}>
The person is {item.age} years old.
<button
type = "button"
onClick = {() => this.onRemoveItem(item.objectID)}
>
Remove
</button>
</li>
))}
</ul>
</div>
);
}
}
export default App;
Над кодом у нас есть массив объектов состояния React (т. е. objectid и age). при определении методов onRemoveItem я бы является параметром.
когда методы onRemoveItem вызываются для события нажатия кнопки, item.objectID передается в качестве параметра.
onRemoveItem = id => {
this.setState(state => {
const list = state.list.filter(item => item.objectID !== id);
Здесь мы фильтруем элемент из массива состояний React, идентификатор объекта которого равен id, а id — не что иное, как идентификатор объекта, который передается в качестве параметра при вызове метода onRemoveItem.
filterфильтрует элементы массива, не соответствующие условию. и условие состоит в том, что он ищет определенный идентификатор.