Javascript For loop仅在带有React挂钩的第二个循环上工作

我有一个项目，我要添加标签，类似于这个网站。我想首先检查用户是否已经选择了标记。我有一个for循环，看看添加的标记是否等于已经存在的标记

如果我做一个名为杰克的标签，它会很好地工作。如果我创建另一个名为Jack的标记，现在我有两个Jack（不好）。在第三次尝试中，它没有添加另一个插孔（好）

这是我的相关代码。我还添加了控制台。我的useState设置TagalReadyThere on一直被忽略，直到第三次尝试时，它应该在第二次尝试时变为true。我做错了什么

const [tagsFound, setTagsFound] = useState([])
const [tagsAdded, setTagsAdded] = useState([])    
const [tagAlreadyThere, setTagAlreadyThere] = useState(false)

const gatherTags = (tags) => {
    setTagAlreadyThere(false)
    console.log(tagAlreadyThere)

    if (tagsAdded.length === 0) {
        setTagsAdded([...tagsAdded, tags]);
    } else {
        console.log(tagsAdded)

        for (let i = 0; i < tagsAdded.length; i++) {
            console.log(tagsAdded[i])

            if (tags === tagsAdded[i]) {
                console.log(tagsAdded[i])
                console.log(tags)
                setTagAlreadyThere(true)
                console.log(tagAlreadyThere)
            }
        }
        console.log(tagAlreadyThere)
        if (tagAlreadyThere === false) {
            setTagsAdded([...tagsAdded, tags]);
            console.log(tagsAdded)
        } else {
            return
        }
    }

    setPostTag('')
}

---

92

无意冒犯，但你的代码有太多不必要的东西

那么它为什么会发生。因为您的

tagAlreadyThere

尚未更新。您正在检查它的值

const gatherTags=（标记）=>{
如果（！tagsAdded.includes（标记））{
setTagsAdded（[…tagsAdded，tags]）；
setPostTag（“”）
}
}

我会告诉你为什么这个代码会引起很多问题，恕我冒犯

首先是同步调用循环中的钩子，因为React.useState钩子是异步的，就像这样。setState是基于类的，它会批量更新以获得性能

我这里有一个关于代码沙盒的示例：

第二，如果新状态是从以前的状态计算出来的，则使用回调样式，因为您可以访问更新的以前的状态，例如：

setTagsAdded(prevTagsAdded => [...prevTagsAdded, tags])

您可以在此处查看文档：

---

希望这有帮助

你的钩子在哪里？就用state。我会反攻吗？不，先生，我完全同意你的看法。我还在学习，大约一年了，我正努力让我的代码更紧凑。我很感激你的回答！

setTagsAdded(prevTagsAdded => [...prevTagsAdded, tags])