慕桂英546537
2021-09-30 17:05:14
我有一個項目要添加標(biāo)簽,類似于這個站點(diǎn)。我想首先檢查用戶是否已經(jīng)選擇了標(biāo)簽。我有一個 for 循環(huán)來查看添加的標(biāo)簽是否等于已經(jīng)存在的標(biāo)簽。如果我制作一個名為 Jack 的標(biāo)簽,它會工作得很好。如果我創(chuàng)建另一個名為 Jack 的標(biāo)簽,現(xiàn)在我有兩個 Jacks(不好)。在第三次嘗試時,它不會添加另一個 Jack(很好。)這是我的相關(guān)代碼。我也添加了控制臺。我的 useState setTagAlreadyThere on 被忽略,直到第三次嘗試,當(dāng)它應(yīng)該在第二次嘗試時變?yōu)?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 jackpostarticle.tsx:64 falsepostarticle.tsx:69 ["jack"]postarticle.tsx:72 jackpostarticle.tsx:75 jackpostarticle.tsx:76 jackpostarticle.tsx:78 falsepostarticle.tsx:81 falsepostarticle.tsx:84 ["jack"]post.tsx:6 {}postarticle.tsx:92 (2) ["jack", "jack"]post.tsx:6 {}postarticle.tsx:92
2 回答

慕森王
TA貢獻(xiàn)1777條經(jīng)驗 獲得超3個贊
無意冒犯,但你的代碼有很多不必要的東西。
那么為什么會這樣。因為你tagAlreadyThere還沒有更新。你正在檢查它是否有價值。
const gatherTags = (tags) => {
if (!tagsAdded.inlcudes(tags)) {
setTagsAdded([...tagsAdded, tags]);
setPostTag('')
}
}
不需要 const [tagAlreadyThere, setTagAlreadyThere] = useState(false)

Smart貓小萌
TA貢獻(xiàn)1911條經(jīng)驗 獲得超7個贊
我會告訴你為什么這段代碼會導(dǎo)致很多問題,沒有冒犯的意思。
首先是你在循環(huán)中同步調(diào)用一個鉤子,因為React.useState鉤子是異步的,就像基于類的this.setState一樣,它批量更新以獲得性能。
我在代碼沙盒上有一個例子:調(diào)用鉤子同步和異步
其次,如果您的新狀態(tài)是從先前狀態(tài)計算出來的,請使用回調(diào)樣式,因為您可以訪問更新后的先前狀態(tài),例如:
setTagsAdded(prevTagsAdded => [...prevTagsAdded, tags])
您可以在此處查看文檔:功能更新
希望這可以幫助!
添加回答
舉報
0/150
提交
取消