Javascript filter() 적용후 state 값 적용

Question

다음과 같이 데이터를 조회 후 화면에 뿌려주고, 그 중에서 filter() 함수로 조건을 적용하여(tgenre 값)선택된 값만 다시(fileredList)로 렌더링 하고자 합니다.filter() 메소드는 잘 적용되는 것 같은데, filteredList 값을 확인해보면 1개가 아닌 2개가 조회됩니다.필터링된 값이 state에 잘 적용이 안되는 것 같은데....., 잘 모르겠습니다.const [appProfileList, setAppTestList] = useState([]); const [isLoading, setIsLoading] = useState(false); const [filterOptions , setFilterOptions] = useState({ tname : '', tgenre : '', startDate : null, endDate : null }) // 필터링된 리스트 (초기에는 appProfileList === filteredList const [filteredList, setFilteredList] = useState([]); //fetcher 함수 const fetchAppProfileList = async () => { setIsLoading(true); setTimeout(async()=> { try{ const {data, status} : any = await axios.get(`${API}`,{ // params : {email : form.email}, headers : { "Authorization" : '*********' } }) if(status === 200){ setAppTestList(data.tapp_profile_list); setFilteredList(data.tapp_profile_list); //초기에는 동일하게 적용 } } catch(e : unknown){ if(e instanceof Error) console.log(e.message) } finally{ setIsLoading(false); } }, 10 useEffect(()=>{ fetchAppProfileList(); },[]) // 필터링 함수 const applyFilter = useCallback(() =>{ let items = appProfileList; if(filterItem.tgenre !== '') { items.forEach((item) => { console.log(`list.tgenre : ${item.tgenre}`) console.log(`list.filterItem : ${filterItem.tgenre}`) console.log(item['tgenre'] === filterItem.tgenre) }) items.filter((list) => { return list.tgenre === filterItem.tgenre }) } console.log(`result: ${JSON.stringify(items)}`) setFilteredList(items); },[filterOptions]) console.log(`filteredList : ${JSON.stringify(filteredList)}`) return( ) => setFilterOptions({...filterOptions, tgenre : Number(e.target.value)})} <------------------값 변경 /> ....item.tgenre : 3 filterItem.tgenre : 3 true item.tgenre : 4 filterItem.tgenre : 3 false result: [{"profile_uid":100000000000152,"tname":"230925 테스트","tgenre":3,"ticonuid":300000000000692,"tscreenuid":300000000000693,"tappdown":0,"tapplink":"htttp://aaa.com","sdk_key":"AP2023L6KPU0Q00OZUSS05","active_tag":1,"regdate":"2023-09-25 01:54:51.0","test_do_cnt":0}, //tgenre값이 3으로 검색했는데, 4인 값도 state에 나옵니다. filteredList : [{"profile_uid":100000000000152,"tname":"230925 테스트","tgenre":3,"ticonuid":300000000000692,"tscreenuid":300000000000693,"tappdown":0,"tapplink":"htttp://aaa.com","sdk_key":"AP2023L6KPU0Q00OZUSS05","active_tag":1,"regdate":"2023-09-25 01:54:51.0","test_do_cnt":0},{"profile_uid":100000000000162,"tname":"dddd","tgenre":4,"ticonuid":300000000000712,"tscreenuid":300000000000713,"tappdown":0,"tapplink":"htttp:://sss","sdk_key":"AP20238997W7X7HVPRRYOG","active_tag":1,"regdate":"2023-10-04 03:14:35","test_do_cnt":0}]

EmDev · Answer

배열의 filter 메소드는 원본 배열을 변경하지 않는 걸로 알고 있는데...이 부분을 한 번 확인해보시면 될 것 같아요!

그린티라떼 · Answer

다음과 같이 수정했습니다. filter() 리턴값을 items로 받아야 합니다. export const applyFilter = (items : any, filterOptions : any) =>{ console.log(items) if(filterOptions.tgenre !== '') { items = items.filter((item : any) => (item.tgenre === filterOptions.tgenre)) } if(filterOptions.startDate !== null && filterOptions.endDate !== null){ items = items?.filter((item : any) => (item.regdate!.substring(0,11) >= getDate(filterOptions.startDate!)!) && (item.regdate!.substring(0,11) <= getDate(filterOptions.endDate!)!)) } if(filterOptions.tname !== '') { items = items.filter((item : any) => item.tname!.includes(filterOptions.tname!)) } return items; }

Javascript filter() 적용후 state 값 적용

2개의 답변

Q&A 목록