반응 상태가 올바른 순서로 매핑되지 않았습니다.

Question

Redux를 사용하는 Next.js 프로젝트가 있습니다. 내 상점에는 Redux 감속기를 통해 업데이트되는 일련의 상태가 있습니다. 기본적으로 일부 구성 요소에서 자주 사용하는 상태 배열입니다.

제 리듀서 중 하나에서 이 배열을 정렬합니다. 배열은 객체로 채워지고 특정 속성을 기준으로 정렬됩니다. console.log 배열을 정리해보니 잘 정리된 것 같습니다.

내 구성 요소 중 하나에서 이 정렬 상태를 매핑했습니다. 여기서는 논리를 단순화했습니다.

으아악

HTML이 표시될 때 모든 요소가 올바른 순서로 되어 있지 않습니다. 마지막 수십 div 요소는 순서대로 표시되지만 처음 12개는 무작위로 나타납니다.

예를 들어 이것은 배열입니다.

으아악

정렬 후 콘솔 로깅은 예상 결과를 반환합니다. 정렬 기능입니다.

names = names.sort((a, b) => a.firstname.localeCompare(b.firstname))

생성된 HTML은 아래와 같아야 합니다.

대신 무슨 이유에서인지 결과가 엉망이네요. Redux 편집 상태 때문인 것 같지만 이유는 모르겠습니다.

제가 아는 한 이것은 널리 퍼진 버그이므로 제 코드가 지나치게 단순화된 경우 추가 컨텍스트를 기꺼이 제공하겠습니다. 어떤 답변이라도 대단히 감사하겠습니다. 그러나 문제의 범위를 좁히는 데 도움이 되는 답변이라면 특히 도움이 될 것입니다.

Answer 1

배열을 정렬하기 위해 Redux 감속기를 사용하고 있습니다. 콘솔 로그는 정확하지만 요소가 잘못된 순서로 표시됩니다. 왜 이런 일이 발생하는지 아직 모르겠지만 해결책은 리듀서의 콘텐츠를 정렬하지 않는 것입니다.

Redux에서는 직접 정렬하는 대신 선택기를 통해 항목을 정렬해야 합니다. 리듀서에서 직접 정렬하는 대신 선택기에서 항목을 정렬하면 문제가 저절로 해결됩니다.