렌더링 전 소품 업데이트 (Redux 작업을 통한 비동기 호출)

여기에서 어떤 방향을 찾고 있습니다. 내 시나리오는 다음과 같습니다.렌더링 전 소품 업데이트 (Redux 작업을 통한 비동기 호출)

사용자가 모든 요리법의 메타 데이터를 렌더링하는 페이지에 있습니다.
사용자가 조리법을 클릭하면 조리법 구성 요소를 렌더링하는/recipes/: id로 전송됩니다. ComponentDidMount()의 Recipe 구성 요소에는 비동기 AXIOS 호출을 내 서버로 되돌려 보내는 Redux 액션에 대한 호출이 들어 있습니다. 데이터는 소품 위에 놓여 화면에 표시됩니다.
사용자가 다시 클릭하면 모든 요리법 페이지로 이동합니다. 그들은 개별 레서피 페이지로 이동하는 다른 레서피를 클릭합니다. 문제가 있습니다 : 잠시 동안 AXIOS/redux 요청으로 비동기 호출이 완료되는 동안 이전 recipe.name (소품)이 표시됩니다.

그래서 질문이 있습니다. 사용자가/recipes/: id로 이동할 때 데이터를 렌더링하기 전에 비동기 redux 액션에서 새 소품을 가져 와서 소품의 부실 데이터가 보이지 않도록하려면 어떻게해야합니까?

건배!

2017-12-30 Miscue

문제를 해결하는 또 다른 방법은 사용자가 조리법 페이지에서 벗어나 탐색 할 때 오래된 데이터를 지우는 것입니다. –

구성 요소 소품이 Redux 상태에 연결되어있는 경우, 귀하는 redux thunk를 호출하여 레서피를 가져 오기만하면됩니다. Axios를 사용하고 상태를 업데이트하고 구성 요소를 자동으로 다시 렌더링해야합니다. – urubuz

여기에는 다양한 옵션이 있습니다. 하나의 옵션은 recipe/component를 인덱스 페이지로 전환 할 때'Recipe' 컴포넌트를 마운트 해제하고,'recipes/: id'가 수신 될 때마다 다시 마운트하는 것입니다. 또 다른 옵션은 렌더링을하기 전에 동기 호출을 수행하기 전에 가져 오기가 완료 될 때까지 기다리는 것입니다. – lfender6445

componentWillUnmount 라이프 사이클 후크를 사용하면 이제 여분의 래서 피 데이터를 지우는 작업을 호출 할 수 있습니다.

출처

2017-12-30 23:05:56 Richard

안녕하세요. 응답 해 주셔서 감사합니다. 따라서 componentwillUnmount를 사용하여 현재 상태를 지우는 작업을 보내시겠습니까? – Miscue

예 또는 다른 방법으로 모든 요리법 구성 요소에 'componentDidMount'를 사용하여 모든 요리법 경로로 돌아갈 때 현재 요리법을 삭제할 수 있습니다 – Richard

렌더링 전 소품 업데이트 (Redux 작업을 통한 비동기 호출)

답변

관련 문제