React/JavaScript 从 props.items 中删除一些东西答案

【问题标题】：React/JavaScript remove something from props.itemsReact/JavaScript 从 props.items 中删除一些东西
【发布时间】：2023-03-27 12:25:02
【问题描述】：

嗨，我是 JavaScript/React 的新手，我目前正在制作一个项目来更多地练习它。

我有一个费用列表，其中包含一些费用，所有费用都有一个唯一的 ID，存储为 props.items，但我正在尝试添加一个删除按钮，以便在点击时从 props.items 中删除费用。有没有办法使用唯一 ID 从 props.items 中删除项目？

目前我有这个idNumber是从子组件ExpenseItem发回的唯一ID

const onRemoveExpense = (idNumber) => {
    console.log("remove clicked", idNumber)
    console.log(props.items, "<- all items")

  }


  return (
    <ul className='expenses-list'>
      {props.items.map((expense) => (
        <ExpenseItem
          key={expense.id}
          value={expense.id}
          title={expense.title}
          amount={expense.amount}
          date={expense.date}
          removeExpense={onRemoveExpense}
        />
      ))}
    </ul>
  );

  }

感谢您的帮助！

【问题讨论】：

其中一个选项是您可以使用 filter 根据 ID 删除。

标签： javascript reactjs react-props

【解决方案1】：

我在这里看到的最大障碍是您的 items 数组不处于相关组件的状态 - 它是作为 props 传入的。因此，您需要定义删除脚本，其中组件将项目保存在其组件状态。您可以将其写在以下内容的某处：

const onRemoveExpense = (idNumber) => {
    this.setState((state, props) => {
        // get items from current state
        const { items } = state;
        // get a new array with only those items that do *not* have the id number passed
        const newItems = items.filter((item) => item.id !== idNumber);
        // return it to set the new state
        return newItems;
    });
}

这显然需要根据您的特定状态和组件结构进行调整。然后，您可以将此作为道具与项目一起传递给相关组件，并调用它以触发删除。

【讨论】：

【解决方案2】：

对于“隐藏”功能而不是删除功能，您可以尝试添加 shown 布尔属性，然后在点击时更改它。

但要真正删除它，您需要将项目存储在状态中。

你可以试试这样的：


  const [items, setItems] = useState(props.items)
  // set the initial state as `props.items`
  // (I'm assuming the code snippet you shared exists inside a functional component)

  const onRemoveExpense = (idNumber) => {
    console.log("remove clicked", idNumber)
    console.log(props.items, "<- all items")
    const newItems = items.filter(({ id }) => id !== idToDelete)
    setItems(newItems)
  }


  return (
    <ul className='expenses-list'>
      {items.map((expense) => (
        <ExpenseItem
          key={expense.id}
          value={expense.id}
          title={expense.title}
          amount={expense.amount}
          date={expense.date}
          removeExpense={() => onRemoveExpense(expense.id)}
        />
      ))}
    </ul>
  );

  }

不过，我可能忘记了一些事情——我还没有测试过上面的代码。您可能需要useEffect() 才能在状态更改时正确重新渲染。

或者您可以管理为该组件定义items 的组件中的状态。

【讨论】：