사용자 입력을 기반으로 데이터세트의 데이터를 필터링하는 데 문제가 있습니다.

Question

지금까지 시도한 작업에 대한 개요는 다음과 같습니다.

1. 사용자가 검색어를 입력할 수 있는 searchInput 요소가 있습니다.
2. searchInput 값이 변경될 때 필터링 프로세스를 처리하는 함수를 사용합니다.
3. 필터 함수는 데이터세트를 반복하고 각 항목을 searchInput 값과 비교하여 표시할지 숨길지 결정합니다. 그러나 searchInput을 입력하면 데이터가 동일하게 유지되고 필터링이 적용되지 않는 것 같습니다.

필터 데이터 기능

으아악 으아악

restruntList JSON 데이터 형식

으아악

Answer 1

제공하신 코드와 설명에 따르면 이 접근 방식은 대부분 정확해 보이지만 필터 데이터 기능과 레스토랑 데이터를 처리하는 방식에 작은 문제가 있습니다.

가장 중요한 문제는 필터링 및 업데이트 상태를 처리하는 방법입니다. React의 상태 업데이트는 비동기식이며 searchText值来过滤restaurants可能无法得到预期的结果。状态更新可能在设置searchText를 직접 사용한 직후에 발생하지 않으므로 일관성이 없거나 오래 필터링된 결과를 얻을 수 있습니다.

이 문제를 해결하려면 useEffect钩子在searchText변경 시 필터 데이터 업데이트를 활용하세요. 이렇게 하면 필터 기능이 항상 최신 상태에서 작동합니다. 업데이트된 코드는 다음과 같습니다.

으아악

코드 변경 사항:

1. 원시 데이터와 필터링된 데이터 간의 혼동을 피하기 위해 상태 변수 이름을 restaurants更改为filteredRestaurants에서 변경했습니다.
2. 변경사항에 useEffect钩子来处理searchText필터를 추가했습니다. 이렇게 하면 필터링된 데이터가 올바르게 업데이트됩니다.

이제 검색 입력창에 입력하면 필터링이 즉시 적용되어 그에 따라 레스토랑 목록이 업데이트되어야 합니다.