从数组中删除项目-父子项-React Hooks

问题描述 投票:0回答:1

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

一个简单的示例,父级创建子级数组。

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

孩子有一个删除按钮。

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

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

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

问题

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

我将通过单击child2的删除按钮来删除child3(索引2)。

转到我的父removeContent,但是我的数组如下所示:[0:{child1},1:{child2}]

然后这将删除我的整个数组。有人知道为什么吗?

arrays reactjs react-hooks parent-child
1个回答
0
投票

发生这种情况是因为您正在使用切片来删除项目。您的分片采用两个值,第一个是开始,另一个是结束。您从id索引开始,然后从右侧删除所有索引,然后转到第0个索引。因此,从头到尾都将删除所有项目。

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

一种更好的从数组中删除项目的解决方案,并且使用Array.filter方法也是如此。

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

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

此功能将从阵列中删除所选项目。arr->您的数组。index->​​要删除的项目的索引。

希望这能回答您的问题。

© www.soinside.com 2019 - 2024. All rights reserved.