React/JavaScript 从 props.items 中删除一些内容

Question

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

我有一个费用清单，其中有些费用的唯一 ID 存储为 props.items，但我正在尝试添加一个删除按钮，以便在 props.items 中删除费用点击。有没有一种方法可以使用唯一 ID 从 props.items 中删除项目？

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

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>
  );

  }

感谢您的帮助！

Answer 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;
    });
}

这显然需要根据您的具体状态和组件结构进行调整。然后，您将它作为道具与项目一起传递给有问题的组件，并调用它来触发删除。

Answer 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 的组件中的状态。

React/JavaScript 从 props.items 中删除一些内容

React/JavaScript remove something from props.items

javascript

reactjs

react-props