此特定代码如何从列表中删除项目

Question

我正在尝试学习在线做出反应，除了这行代码，我什么都懂

const removeItem = (id) => {
    let newPeople = people.filter((person) => person.id !== id);

    setPeople(newPeople);

  };

特别是person.id !== id如何从列表中删除项目并添加到新列表

这是完整的代码

import React from 'react';
import { data } from '../../../data';
const UseStateArray = () => {
  const [people, setPeople] = React.useState(data);

  const removeItem = (id) => {
    let newPeople = people.filter((person) => person.id !== id);

    setPeople(newPeople);

  };
  return (
    <>
      {people.map((person) => {
        const { id, name } = person;
        return (
          <div key={id} className='item'>
            <h4>{name}</h4>
            <button onClick={() => removeItem(id)}>remove</button>
          </div>
        );
      })}
      <button className='btn' onClick={() => setPeople([])}>
        clear items
      </button>
    </>
  );
};

export default UseStateArray;

Answer 1

首先你要知道过滤器是如何工作的，

filter() 方法创建一个新数组，其中填充了通过 function 提供的测试的元素。

在您的案例中，测试是person.id !== id ，如果测试通过了某个元素，则该元素将位于新数组中。 否则元素不会在新数组中。 清楚吗？

Answer 2

filter 方法创建一个数组的 浅表副本，但不是整个数组，而是只创建满足谓词的那些元素。

所以newPeople将包含people中所有元素的副本，它是people[element].id不同于id 。

访问https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter了解过滤器方法的更多细节。