[React] setState에 대한 생명주기

발생원인 : 함수형 컴포넌트에서 UseState 사용시 setState 변경사항이 컴포넌트에 즉각반영 보장이 안됨

• useState분만 아니라 setState자체가 비동기 처리로 진행되어 setState 호출 후 값 출력시 이전 값 출력이 됨
  (참고 : dongmin-jang.medium.com/reactjs-setstate-%EC%99%9C-%EB%B9%84%EB%8F%99%EA%B8%B0%EB%A1%9C-%EC%B2%98%EB%A6%AC%EB%90%98%EB%8A%94%EA%B0%80-8197d707ca6a

[Reactjs] setState() 왜 비동기로 처리되는가?

 

 

해결방법 :  setState에 대한 생명주기 학습

 

발생로직 : 

 const getBetEvent = async(connection)=>{
    setBetRecords(records)
    console.log(betRecords)

  }

• betRecords 호출시 초기선언 값 출력 

 

---

TroubleShooting

• setState 처리한 pot 변수는 Dom 문서에서 정상적으로 출력된다.

      <div className="jumbotron">
          <h1>Current Pot : {pot}</h1>
          <p>Lottery</p>
          <p>Lottery Tutorial</p>
          <p>Your Bet</p>
          <p>{challenges[0]}  {challenges[1]}</p>
        </div>
      </div>

 

           <tbody>
            {
              finalRecords.map((record,index)=>{
                return(
                <tr key={index}>
                  <td>{record.index}</td>
                  <td>{record.bettor}</td>
                  <td>{record.challenges}</td>
                  <td>{record.answer}</td>
                  <td>{record.pot}</td>
                  <td>{record.win}</td>
                  <td>{record.targetBlockNumber}</td>

                </tr>
                )
              })
            }
          </tbody>

 

 

값을 못찾고 있는 finalRecords 변수와 pot 변수의 차이점을 찾기

• FinalRecord 처리 할 때 값 저장이 아직 안된 betRecords을 참조하여 널값 출력이 됨.

 
      let records = [...betRecords] 
      

---

해결방안 

 

  useEffect(()=>{

    initWeb3()
    const time =  setInterval(pollData,2000)
      return ()=> clearInterval(time)  //componentWillUpdate 사이클에서 setinterval함수가 재호출되므로 전 호출 clear
  },[finalRecords]);

함수형 컴포넌트와 클래스형 컴포넌트의 차이점인진 모르겠지만,

ComponentDidMount 단게에서 setState 실행시 변경사항이 리렌더링 되기전엔 적용되지 않음.

ComponentDidUpdate 이용해서 finalRecords가 변경될때 다시 렌더링 하기로 로직 구성

(ComponentWillUnmount 이용해서 그전 SetInterval 함수를 clear 해주지않거나 setInterval을 사용하지않으면 
계속 렌더링 됨)