过滤出一组项目设置状态

Posted 2023-02-22

【中文标题】过滤出一组项目设置状态

【英文标题】：filtering out an array of items setting state

【发布时间】：2022-01-23 22:20:21

【问题描述】：

我希望过滤一个数组并返回数组的所有元素，除了被点击的元素，所以我有一个列表元素的映射，每个元素都有一个 key=index 的映射，onClick 它应该调用我的删除函数，并传入要删除的元素的索引，然后我需要过滤该数组，删除元素，更新状态，并将此信息发送到我的后端。

这里是删除功能

  const deleteItem = (id) => 
    // use filter, to loop through all pieces of index
    const element = list.todoItems.indexOf(id - 1);
    setList( todoItems: list.todoItems.filter(element !== id) );
    console.log(list.todoItems);
    dispatch(updateTodo(list));
  ;

这里是映射数组

list.todoItems.map((Item, index) => (
                <div
                  // setup anonymous function, that will call
                  // ONLY when the div
                  // is clicked on.
                  key=index
                  onClick=() => deleteItem(index)
                >
                  /* list item, gets text from props */
                  <li>Item</li>
                </div>
              ))

我一定遗漏了一些东西，因为这应该可以工作，尽管我可能不得不换档并将每个项目作为我的数据库中的实际对象，尽管 id 而不是这样做，因为我觉得字符串数组更合适对于这个应用程序。

【参考方案1】：

删除您的 indexOf 逻辑，这将起作用。

您不必查找数组的索引，因为您已经将它作为参数接收。

const deleteItem = (id) => 
        setList( todoItems: list.todoItems.filter((_, filterID) => filterID !== id) );
        console.log(list.todoItems);
        dispatch(updateTodo(list));
 ;

【讨论】：

在这种情况下我该如何处理元素？因为您将它保存在过滤器中，但从未为其分配值？

这应该工作

【参考方案2】：

你不需要从 indexOf 函数的索引中减去一个

在这种情况下，拼接比过滤器效果更好

const deleteItem = (id) => 
  const element = list.todoItems.indexOf(id);
  setList( todoItems: ...list.todoItems.splice(element, 1));
  dispatch(updateTodo(list));
;

【讨论】：

我不建议这种方法。因为你直接改变状态

你说得对，我解决了这个问题。

伙计，重要的不是他的事，而是他的事。你不应该直接改变状态。你可以使用不会改变状态的东西。

我知道，你是对的，我修好了

既然你在谈论什么是正确的，你的回答并没有指出他的代码的实际问题