중첩된 개체를 업데이트할 때 상태 다시 렌더링하지 않음

중첩된 개체를 업데이트할 때 상태 다시 렌더링하지 않음

데이터를 이전 상태 개체로 푸시하고 값으로 반환하여 useEffect에서 업데이트하는 중.

이 코드는 실제로 _시리즈 변수를 useState()에서 바꾸고 있지만, 리렌더링은 발생하지 않는데, 그 이유는?

import { TimeSeries, Pipeline, Stream, EventOut, TimeEvent, TimeRange  } from "pondjs";

export default () => {

  const [_series, $series] = useState(()=>{
    let state = { data : { "name": "x", "columns": ["time", "value"], "points": [], "i" : 0}}
    for(let i=10; i >= 0; i--){state.data.points.push( [new Date(i)-(i*100), Math.round(Math.random()*100)])}
    return state;
  })

  useEffect(() => {
    const interval = setInterval(() => {
      $series(s => {
        s.data.points.push( [new Date(s.data.i*1000), Math.round(Math.sin(s.data.i/10)*50+50)] )
        s.data.points.shift();
        s.data.i++;
        return s;
      });
    }, 500);
  }, []);


    return(
    <p>{

          JSON.stringify((new TimeSeries(_series.data)).collection())

    }</p>
    )

}

나 또한 주 내부의 키 "i"를 업데이트하는 실수를 했을 수도 있으므로, 객체의 여러 부분을 동시에 업데이트하려고 한다.이게 나쁜 관행이야?

문제는 원래 상태를 수정하여 상태를 변경할 때 그 값이 원래 참조에서 업데이트되고 따라서 반응할 때 아무것도 바뀌지 않았다고 생각하고 다시 렌더링하지 않기 때문에 상태 업데이트를 시도할 때 상태를 불변한 것처럼 취급하는 것이 기대된다는 것이다.

 const { useState, useEffect } = React;
 const App = () => {
    
      const [_series, $series] = useState(()=>{
        let state = { data : { "name": "x", "columns": ["time", "value"], "points": [], "i" : 0}}
        for(let i=10; i >= 0; i--){state.data.points.push( [new Date(i)-(i*100), Math.round(Math.random()*100)])}
        return state;
      })
    
      useEffect(() => {
        const interval = setInterval(() => {
          $series(s => {
            return {
                ...s,
                data: {
                  ...s.data,
                  i: s.data.i + 1,
                  points: [...s.data.points.slice(1), [new Date(s.data.i*1000), Math.round(Math.sin(s.data.i/10)*50+50)]]
                }
            }
          });
        }, 500);
      }, []);
    
    
        return(
        <p>{
    
              JSON.stringify(_series.data)
    
        }</p>
        )
    
    }
    
ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="app" />

참조URL: https://stackoverflow.com/questions/56033178/usestate-not-re-rendering-when-updating-nested-object