오예예
144
2021-06-03 17:09:08
0
91

js 특정 value를 가진 리스트만 출력하고 싶습니다


안녕하세요! 지금 리액트로 쇼핑몰 비슷하게 작업하고 있습니다.

상세검색옵션 설정을 어떻게 해야 할지 감이 오질 않아서 질문드립니다


예를 들면 다나와의 상세 검색처럼 8코어를 클릭하면 8코어의 값을 가지고 있는 상품 리스트를 출력하고 싶습니다.

여기서 고민은 "어떻게 해당하는 밸류를 가진 값만 재출력시키지?" 입니다..

코드는 firestore에서 각각 상품마다 특정 값을 부여했고 버튼을 클릭하면 해당 이벤트는 출력 되지만 문제는 '해당하는 밸류만 출력하도록 어떻게 할까? ' 입니다..

아래의 코드에선 gender가 버튼의 이벤트 값을 가지고 있습니다!

아무리 검색을 해봐도 연관된 자료가 없어서 그런데 혹시 이 문제를 해결할 수 있는 방법이나 자료 알고 있으시다면 도와주시면 정말 감사하겠습니다!

const TodayWeatherList = ({gender, select, temperature}) => {

    const temp = Math.round(temperature)-273;
    const [clothes,getClothes] = useState([]);
    const [tempSelect,getTempSelect] =useState();
    const [loading,getLoading] = useState(null);


    const tempList = (temp) => {
        let color = ""
            switch(true) {
                case (temp < -3):
                    color = "black"
                    break;
                case (temp < 4):
                    color = "purple"
                    break;
                case (temp < 8):
                    color = "indigo"
                    break;
                case (temp < 11):
                    color = "blue"
                    break;
                case (temp < 16):
                    color = "green"
                    break;
                case (temp < 19):
                    color = "yellow"
                    break;
                case (temp < 22):
                    color = "orange"
                    break;
                case (temp < 27):
                    color = " red"
                    break;
                case (temp < 35):
                    color = " red"
                    break;
                default :
                ;
                return color;
            }
            
             getTempSelect(color);
        }
        
    
    const clothesList = (temp) => {
        fireStore.collection(`${temp}`)
        .onSnapshot(snapshot => {
            const array = snapshot.docs.map(doc => ({
                id:doc.id,
                ...doc.data(),
            }));
          getClothes(array);
        })
    }

    useEffect(()=> {
        try{
            getLoading(true)
            tempList(temp)
            select === undefined ? clothesList(tempSelect) : clothesList(select)
            
        }catch (err) {
            getLoading(false)
        }
    },[tempSelect,temp,select])

    const ClothesLi = clothes.map(cloth => <li key ={cloth.id} gen={cloth.gen}><a href={cloth.link}><img src={cloth.imageURL}/></a></li>)
    if(gender==='m') {
        console.log(clothes);
    }

    return(
        <>
        <div className={styles.loading}>{loading ? <LoadingSpinner />: ``} </div>
        <ul className={styles.ul}>{ClothesLi}</ul>
        </>
    )

}


export default TodayWeatherList;



0
  • 답변 0

  • 로그인을 하시면 답변을 등록할 수 있습니다.