API 호출을 위해 해당 상태가 즉시 필요한 useState 후크를 사용할 때 setState 호출을 기다리는 방법

API 호출을 위해 해당 상태가 즉시 필요한 useState 후크를 사용할 때 setState 호출을 기다리는 방법

나는 음성 받아쓰기 사용자 지정 후크와 함께 "Note" 값을 저장하는 개체에 받아쓰기 결과를 추가하는 별도의 사용자 지정 후크를 가지고 있다.

사용자가 너무 일찍 저장을 클릭해도 노트를 저장하는 API 호출 직전에 추가해야 하는 부분 결과가 있다.

내 코드는 이렇게 생겼어.

function NoteDictation(props) {

  const [
    results,
    partialResults,
    error,
    toggleRecognizing,
    speechHasStarted,
  ] = useDictation();

    const [note, setNote, saveNoteAPICall, updateNoteAPICall] = useNote({})
    //Use Note is a custom hook that has that certain type of note's properties built in (they're medical notes, and we have a custom hook for each type of note).



    function handleSavePress(){

      if(partialSpeechResults){
        //If the dictation software hasn't returned a final result, 
        //append the partialSpeechResults
        setNote({...note, text: note.text +  partialSpeechResults})
      }


      //SaveNote does not use the value set above if there are partial results.
      saveNote()
    }

    return (
     <View>
       <NoteContents note={note} results={results} partialResults={partialResults} />
       <Button onPress={handleSavePress> />
    </View>
    )

}

문제는 SaveNote가 호출되어 노트의 이전 상태를 사용하고 있다는 것이다.주의 설정이 제시간에 완료되지 않고 있다.

useEffect 후크를 사용하여 변경 사항을 모니터링할 수 없는 것 같은데, API에 전화를 걸어 노트를 바로 저장하려고 하는데, 저장할 때 노트 상태에 액세스하고 있기 때문이다.

이것을 처리하는 가장 좋은 방법은 무엇인가?감사합니다.

편집

업데이트된 코드를 볼 때 내가 원래 답변에서 설명한 내용과 매우 유사하게 처리할 수 있어야 한다.

// will run on mount and whenever note changes
useEffect(() => {
  // skip first run (what you check depends on your initial note value)
  if (Object.keys(note).length) {
    saveNoteAPICall()
  }
}, [note])

function handleSavePress(){
  if(partialSpeechResults){
    // If the dictation software hasn't returned a final result, 
    // append the partialSpeechResults
    // and let if fall into useEffect when note updates
    setNote({...note, text: note.text +  partialSpeechResults})
  } else {
    // run immediately if not partial
    saveNoteAPICall()
  }
}

중요한 차이점은 전화만 한다는 것이다.saveNote당신이 부분적인 결과를 가지고 있지 않다면 당신의 프레스 핸들러 안에.그렇게 하면 불완전한 세이브를 얻지 못한다.네가 만약setNote, 그것은 당신의 안으로 떨어질 것이다.useEffect올바른 가치로 저축하십시오.

만약 이것이 이러한 노트를 처리하기 위한 일반적인 패턴이라면, 이 논리를 당신의 것으로 옮기는 것이 이치에 맞을 것이다.useNote낚싯바늘을 달다

---

오리지널 해답

사용하니까.useState너를 위해note가치, 당신은 이것을 가지고 다룰 수 있어야 한다.useEffect. 값:useState불변성이기 때문에 효과 후크에 대한 입력으로 매우 효과적이다.통화 내용 이동saveNote()의 밖에handleSavePress그리고 안으로useEffect:

const [note, setNote] = useState({})

// ...Other misc code

// this will run on first execution,
// and then any time the value of note changes
useEffect(() => {
  // skip first run
  if (Object.keys(note).length) {
    saveNote(note)
  }
}, [note])

function handleSavePress(){
  if (partialSpeechResults) {
    // If the dictation software hasn't returned a final result, 
    // append the partialSpeechResults
    setNote({ ...note, text: note.text +  partialSpeechResults })
  }
}

만약, 어떤 이유에선지, 당신의saveNote함수는 이 구성 요소 내부에 정의되어 있으므로 구성 요소 외부로 이동하여 전달하는 것이 좋다.note네가 확신할 수 있도록.useEffect네가 원할 때만 달릴 거야정의해야 할 설득력 있는 이유가 있는 경우saveNote컴포넌트 내부, 그런 다음 정의하십시오.saveNote와 함께useCallback그리고 당신의 것을 바꾸다useEffect그 변경사항을 차단하는 기능:

const [note, setNote] = useState({})

// ...Other misc code

// this function will only change when note changes
const saveNote = useCallback(() => {
  // whatever api call you need to run here
  // that uses the note value in scope
}, [note])

// this will run on first execution,
// and then any time the value of note (and thus saveNote) changes
useEffect(() => {
  // skip first run
  if (Object.keys(note).length) {
    saveNote()
  }
}, [saveNote, note])

function handleSavePress(){
  if (partialSpeechResults) {
    // If the dictation software hasn't returned a final result, 
    // append the partialSpeechResults
    setNote({ ...note, text: note.text +  partialSpeechResults })
  }
}

더 완벽한 코드 예를 보지 않고서는 정확히 어디가 잘못될 수 있는지 판단하기가 어렵다.그// ...Other misc code예제의 섹션은 좀 중요한데, 특히 정의한 부분과 방법saveNote.

useEffect 후크를 사용해 보십시오.

편집: 첫 번째 렌더에서 실행되므로 저장하기 전에 노트 개체가 비어 있지 않은지 확인하십시오.

useEffect(() => {

    if(Object.keys(note).length !== 0){

        saveNote();
    }

});

참조URL: https://stackoverflow.com/questions/57138642/how-to-await-a-setstate-call-finishing-when-using-usestate-hook-that-immediately