>source

백엔드에 데이터를 넣고 응답을 얻은 다음 setState ()에 사용하여 페이지를 동 기적으로 렌더링해야합니다. .를 사용하면 editPost의 변경 사항이 약 반 시간 동안 지속되지만 async/await를 사용하면 실험에 따라 잘 작동하는 것 같습니다. 두 사람이 동등하다고 들었 기 때문에 왜 이런 일이 발생하는지 잘 모르겠습니다.

.then :

onEditSubmit(e){
        e.preventDefault()
        const newPost = {
            id: this.state.id,
            title: this.state.titl,
            author: this.state.auth,
            content: this.state.cont
        }
        editPost(newPost)
        .then(axios.get('/blog')
        .then(response => {
            this.setState({
                posts: response.data,
                titl: '',
                auth: '',
                cont: ''
            })
        }))
    }

비동기/대기 :

async onEditSubmit(e){
    e.preventDefault()
    const newPost = {
        id: this.state.id,
        title: this.state.titl,
        author: this.state.auth,
        content: this.state.cont
    }
    await editPost(newPost)
    var response = await axios.get('/blog')
    await this.setState({
            posts: response.data,
            titl: '',
            auth: '',
            cont: ''
    })
}

editPost :

export const editPost = editPost => {
    return axios.put(`/blog/write/${editPost.id}`, {
        title :  editPost.title,
        author :  editPost.author,
        content :  editPost.content
    })
}

참고 : 비 동기화 된 setState ()가 이와 관련이 있는지 확실하지 않습니다.


  • 답변 # 1

    첫 번째 약속에는 콜백 함수가 있어야합니다 :

    onEditSubmit(e){
        e.preventDefault()
        const newPost = {
            id: this.state.id,
            title: this.state.titl,
            author: this.state.auth,
            content: this.state.cont
        }
        editPost(newPost)
        .then(() => {
         axios.get('/blog')
        .then(response => {
            this.setState({
                posts: response.data,
                titl: '',
                auth: '',
                cont: ''
            })
        })
    })
    }
    
    

관련 자료

  • 이전 c# - 대중 교통 - 대형 페이로드 소비자 단위 테스트
  • 다음 angular - Google Firestore에서 Observable을 필터링하는 방법