For循環僅在使用React掛鈎的第二個循環上工作

Question

我有一個項目，我將添加標簽，類似於這個網站。 我想首先檢查標簽是否已被用戶選中。 我有一個for循環來查看添加的標簽是否等於已經存在的標簽。

如果我制作一個名為Jack的標簽，那就可以了。 如果我創建另一個名為Jack的標簽，現在我有兩個Jacks（不好）。 在第三次嘗試時，它沒有添加另一個傑克（好）。

這是我的相關代碼。 我也添加了控制台。 我的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) => { if (!tagsAdded.inlcudes(tags)) { setTagsAdded([...tagsAdded, tags]); setPostTag('') } } 

不需要const [tagAlreadyThere, setTagAlreadyThere] = useState(false)

Answer 2

我會告訴你為什么這段代碼會導致很多問題，而不是冒犯。

首先是同步調用循環內的一個鈎子，因為React.useState鈎子是異步的，就像基於類的this.setState一樣，它批量更新以獲得性能。

我在Code Sandbox上有一個例子： 調用Hooks Sync和Async

其次，如果您的新狀態是從先前狀態計算的，請使用回調樣式，因為您可以訪問更新的先前狀態，例如：

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

您可以在此處查看文檔： 功能更新

希望這可以幫助！