Question

我正在学习反应，并遇到了一个教程，其中在JSX中添加了删除按钮，并且已定义一个函数来执行该事件。但是，我很困惑下面的代码是做什么的。

const deleteList=this.state.list.filter(item=>item.objectID!==id);

特别让我感到困惑的是以下逻辑含义：

(item=>item.objectID!==id);

Answer 1

this.state.list.filter(item=>item.objectID!==id);

这部分循环遍历list中的所有项目，并返回一个仅包含与条件item.objectID!==id匹配的项目的新数组这是删除列表中一个元素的常用语法。

请参见filter方法中的documentation。

Answer 2

类似于

function(item) {
   return item.objectID!==id
}

基本上过滤掉所有id不等于item.objectID的元素

Answer 3

为了更好地理解，我将通过一个示例对其进行解释。看到下面的代码：-

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方法 id 是参数。

在按钮单击事件上调用onRemoveItem方法时，会将item.objectID作为参数传递。

onRemoveItem = id => {
        this.setState(state => {
          const list = state.list.filter(item => item.objectID !== id);

在这里，我们从React状态数组中过滤出一个对象，该对象的id是id，而id只是在 onRemoveItem 方法调用中作为参数传递的objectid。

此逻辑在JavaScript中起什么作用？

3 个答案: