For 循环仅适用于带有 React 钩子的第二个循环

Question

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

如果我制作一个名为 Jack 的标签，它会工作得很好。如果我创建另一个名为 Jack 的标签，现在我有两个 Jacks（不好）。在第三次尝试时，它不会添加另一个 Jack（很好。）

这是我的相关代码。我也添加了控制台。我的 useState setTagAlreadyThere 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('')

}

安慰。

TagAdder.tsx:9 jack

postarticle.tsx:64 false

postarticle.tsx:69 ["jack"]

postarticle.tsx:72 jack

postarticle.tsx:75 jack

postarticle.tsx:76 jack

postarticle.tsx:78 false

postarticle.tsx:81 false

postarticle.tsx:84 ["jack"]

post.tsx:6 {}

postarticle.tsx:92 (2) ["jack", "jack"]

post.tsx:6 {}

postarticle.tsx:

92

Answer 1

无意冒犯，但你的代码有很多不必要的东西。那么为什么会这样。因为你tagAlreadyThere还没有更新。你正在检查它是否有价值。const gatherTags = (tags) => {&nbsp; &nbsp; if (!tagsAdded.inlcudes(tags)) {&nbsp; &nbsp; &nbsp; setTagsAdded([...tagsAdded, tags]);&nbsp; &nbsp; &nbsp; setPostTag('')&nbsp; &nbsp; }}不需要 const [tagAlreadyThere, setTagAlreadyThere] = useState(false)

Answer 2

我会告诉你为什么这段代码会导致很多问题，没有冒犯的意思。首先是你在循环中同步调用一个钩子，因为React.useState钩子是异步的，就像基于类的this.setState一样，它批量更新以获得性能。我在代码沙盒上有一个例子：调用钩子同步和异步其次，如果您的新状态是从先前状态计算出来的，请使用回调样式，因为您可以访问更新后的先前状态，例如：setTagsAdded(prevTagsAdded&nbsp;=>&nbsp;[...prevTagsAdded,&nbsp;tags])您可以在此处查看文档：功能更新希望这可以帮助！