从数组中删除项目 - Parent Child - React Hooks

Question

我正在尝试从数组中删除一个项目。

一个简单的例子，parent 创建了 children 的数组。

const Parent = () => {

    const [content, setContent] = useState([]);

    useEffect(() => {});

    const addContent = event => {
        setContent(content => content.concat(
          <Child key={content.length} id={content.length} removeItem={(id) => removeContent(id)}/>
        ));
    }

    function removeContent (id) {
        setContent(content.slice(id, 0));
    }

    return(
        <div onClick={(event) => addContent(event)}>
            {content}
        </div>
    )
}

Child 有一个删除按钮。

const Child = ({id, removeItem}) => {

    remove = event => {
        removeItem(id);
    }

    return(
       <button onClick={(event) => remove(event)}>
            Remove
       </button>
    )
}

问题

假设我在数组中创建了 4 children：
[0: {child1}, 1: {child2}, 2: {child3}, 3: {child4}]

我将通过单击 child2 的删除按钮删除 child3（索引 2）。

它转到我的 parent removeContent，但我的数组如下所示：
[0: {child1}, 1: {child2}]

这会删除我的整个数组。有谁知道为什么？

Answer 1

发生这种情况是因为您正在使用切片删除项目。您的切片采用两个值，第一个是开始，另一个是结束。您从 id 索引开始并删除右侧的所有内容，然后转到第 0 个索引。所以你所有的项目都被从头到尾删除了。

arr.slice([开始[ 结束]])

从数组中删除项目的更好解决方案是使用 Array.filter 方法。

// 从现有数组中删除选定数组索引的函数。

const removeSelectedItem = (arr, index) => {
   return arr.filter((el, i) => index !== i)
}

此函数将从数组中删除所选项目。 arr -> 你的数组。 index -> 要删除的项目的索引。

希望这能回答您的问题。

Answer 2

您的代码几乎没有问题 :

1) 您正在收听 add/remove 单击这两个事件

<div onClick={(event) => addContent(event)}> // <---- listening to add
      // Arry of child which has remove , so on click it will trigger both remove and add (for parent)
      {content} 
     // so 
</div>

// {content}  should be out side of that div

2) slice return new sub array, slice of array 它不会提供带有删除 id 的数组，而不是你可以使用过滤器（带id）或拼接（带索引）

3) 你不应该在你的状态中存储 jsx ( Do Read )

工作片段：

您可以运行下面的代码片段并查看代码更改。

const { useState , useEffect } = React;

const Child = ({id, index, removeItem}) => {

    return(
       <button onClick={() => removeItem(index)}>
            {id} - Remove
       </button>
    )
}

var contentId = 0;
const Parent = () => {

    const [content, setContent] = useState([]);

    useEffect(() => {});

    const addContent = event => {
        contentId++;
        setContent(content => [...content , contentId]);
    }

    function removeContent (index) {
        let clone = [...content]
        clone.splice(index, 1)
        setContent(clone);
    }

    return(<div>
        <div onClick={(event) => addContent(event)}>
            Add Content
        </div>
        {
          content.map((id,i) => 
            <Child key={id} id={id} index={i} removeItem={removeContent}/>
          )
        }
        </div>
    )
}

ReactDOM.render(<Parent />, document.getElementById('react-root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react-root"></div>

从数组中删除项目 - Parent Child - React Hooks

Removing item from array - Parent Child - React Hooks

arrays

parent-child

reactjs

react-hooks

问题