반응 후크가 있는 두 번째 루프에서만 작동하는 루프용

반응 후크가 있는 두 번째 루프에서만 작동하는 루프용

나는 이 사이트와 비슷한 태그를 추가할 프로젝트가 있어.먼저 태그가 이미 사용자에 의해 선택되었는지 확인하고 싶다.추가된 태그가 이미 있는 태그와 동일한지 확인하기 위한 루프가 있다.

만약 내가 잭이라는 꼬리표를 만든다면, 그것은 잘 될 거야.만약 내가 잭이라는 이름의 태그를 하나 더 만들면, 나는 지금 두 개의 잭을 가지고 있다.세 번째 시도에서는 잭을 하나 더 추가하지 않는다(좋다).

여기 내 관련 코드가 있다.나는 또한 콘솔을 추가했다.My useState setTagAlready세 번째 시도까지는 무시되고 있는데, 두 번째 시도에서는 이 시도가 사실이어야 한다.내가 여기서 뭘 잘못하고 있는 거지?

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

악의는 없지만 네 코드에는 불필요한 것들이 너무 많아.

그래서 왜 그런 일이 일어나는지.너 때문에tagAlreadyThere아직 업데이트되지 않았다.그리고 당신은 그것이 가치인지 확인하고 있다.

const gatherTags = (tags) => {
    if (!tagsAdded.inlcudes(tags)) {
      setTagsAdded([...tagsAdded, tags]);
      setPostTag('')
    }
}

할 필요 없음const [tagAlreadyThere, setTagAlreadyThere] = useState(false)

왜 이 코드가 많은 문제를 일으키는지 알려줄게, 악의는 없어.

첫째, 당신은 루프 내부의 후크를 동시에 부르는 것이다. 왜냐하면 React.useState 후크는 이와 같이 비동기적이기 때문이다.setState in class based, it batch update to get performance.

코드 샌드박스에 대한 예: 후크 동기화 및 비동기화 호출

둘째, 새 상태가 이전 상태에서 계산된 경우 업데이트된 이전 상태에 액세스할 수 있으므로 콜백 스타일을 사용하십시오. 예:

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

여기에서 설명서를 확인하십시오.기능 업데이트

이것이 도움이 되기를!

참조URL: https://stackoverflow.com/questions/57734961/for-loop-only-working-on-second-loop-with-react-hooks