UseState 如何将 Array 设置回空？答案

【问题标题】：UseState how to set an Array back to empty?UseState 如何将 Array 设置回空？
【发布时间】：2021-10-12 18:34:57
【问题描述】：

我正在尝试使用钩子将clickFavIconArray 设置回一个空数组。

基本上，setClickFavIconArray 有一个 ID 列表，showFavIcon() 会检查该 ID，如果它包含相同的 ID，我想将其从数组中删除并将 setClickFavIconArray 更新为新数组。

但是，无论如何，它似乎只是添加到原来的clickFavIconArray 上。有没有办法将clickFavIconArray 状态清除回[] 空数组？

这里的一些帮助会很棒。

const [clickFavIconArray, setClickFavIconArray] = useState([]);

    function showFavIcon(id){
        if (clickFavIconArray.includes(id)) {
            const newArray = clickFavIconArray.filter(item => !id.includes(item))
            setClickFavIconArray(newArray)
        }
            setClickFavIconArray([...clickFavIconArray, id])
    }

【问题讨论】：

你只是想说，setClickFavIconArray([])？
您正在过滤数组，更新状态，并且紧接着（两行下方）您再次将 id 附加到数组？也许我不明白这个问题，但是如果你在第一个 setClickFavIconArray(newArray) 之后添加一个 return 语句有帮助吗？

标签： javascript arrays reactjs react-hooks use-state

【解决方案1】：

代码有两个问题

过滤功能好像无效，应该换成

clickFavIconArray.filter(item => id != item)

您正在使用此再次将 id 添加到数组中

setClickFavIconArray([...clickFavIconArray, id])

如果要删除 id，则代码中不需要此行。但是，您始终可以使用以下代码将 clickFavIconArray 设置为空数组状态：

setClickFavIconArray([])

【讨论】：

【解决方案2】：

为确保 id 不会立即再次添加到数组中，请在 if 语句中添加 return 语句。

const [clickFavIconArray, setClickFavIconArray] = useState([]);

function showFavIcon(id){
    if (clickFavIconArray.includes(id)) {
        const newArray = clickFavIconArray.filter(item => !id.includes(item));
        setClickFavIconArray(newArray);
        return; // make sure that the next line is not executed
    }
    setClickFavIconArray([...clickFavIconArray, id])
}

【讨论】：

【解决方案3】：

只需将空数组的新值传递给setClickFavIconArray()：

setClickFavIconArray([])

【讨论】：

这回答了 OP 关于标题的问题，但可能无法解决他的问题？