byul2sol
107
2020-10-14 11:21:15 작성 2020-10-14 13:04:10 수정됨
1
89

리액트 state 관련 질문드립니다.



자동으로 넘어가는 슬라이드를 만들기 위해 setInterval()을 구현하다가, 다음과 같은 이슈를 발견했습니다.


const [selectedTab, setSelectedTab] = useState(props.tabItems[0]);


  const onSlideChange = () => {

    let nextStep:number = selectedTab.step + 1;

    console.log(props.tabItems[nextStep])

    setSelectedTab(props.tabItems[nextStep]);

    console.log(selectedTab);

  }

useEffect(() => {

    const autoSlider = setInterval(onSlideChange, 1000);

    return () => clearInterval(autoSlider);

  }, [])

1초마다 콘솔에 찍히는 것이 확인은 되는데,

분명 setSelectedTab으로 state 값을 다시 설정했음에도 불구하고

두번째 콘솔이 계속 최초에 초기화했던 props.tabItems[0]으로 뜹니다..

그래서 혹시나해서 props.tabItems[nextStep]을 콘솔에 찍어봤더니 이건 또 다음 탭 메뉴가 잘 나오구요.

setState를 해줬는데 바로 반영이 안되는것같습니다.. 새로고침을 해보면 업데이트가 되어있구요.

state는 본인의 값이 업데이트되면 다시 리렌더링 하는걸로 아는데 왜 값이 업데이트가 안될까요?ㅠㅠ.

그 밑에 JSX에서 tabItem을 출력해봐도 업데이트가 안되고있구요.


 <Box className={classes.tabImgSection}>
            <img className={classes.tabImg} src={selectedTab.imgSrc} alt={selectedTab.title}/>
          </Box>


이부분 해결주실수있을까요?


0
  • 답변 1

  • 페코옹
    575
    2020-10-14 12:10:36

    setState에서 객체가 바뀐걸 인식못하는걸로 생각이 드네요

    요렇게 해보세요

    const [selected, setSelected] = useState(0);
    useEffect(() => {
    const slider = setInterval(
    () => setSelected((value) => (value === 2 ? 0 : value + 1)),
    1000
    );
    return () => clearInterval(slider);
    }, []);

    return (
    <div className="slider-contaienr">
    {[
    { title: "slider1", color: "#777" },
    { title: "slider2", color: "#999" },
    { title: "slider3", color: "#bbb" }
    ].map((el, index) => (
    <div
    key={el.title}
    className="slider"
    style={{
    backgroundColor: el.color,
    display: `${selected === index ? "flex" : "none"}`
    }}
    >
    {el.title}
    </div>
    ))}
    </div>
    );
  • 로그인을 하시면 답변 을 등록할 수 있습니다.