Reactjs 更新嵌套对象时使用状态不重新渲染

我正在更新useffect，方法是将数据推送到旧的state对象并将其作为值返回

这段代码实际上是在更改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>
    )

}

从“pondj”导入{TimeSeries，Pipeline，Stream，EventOut，TimeEvent，TimeRange}；
导出默认值（）=>{
常量[_series，$series]=useState（（）=>{
让state={data:{“name”：“x”，“columns”：[“time”，“value”]，“points”：[]，“i”：0}
对于（设i=10；i>=0；i--）{state.data.points.push（[newdate（i）-（i*100），Math.round（Math.random（）*100）]）
返回状态；
})
useffect（（）=>{
常量间隔=设置间隔（（）=>{
$series（s=>{
s、 data.points.push（[新日期（s.data.i*1000），数学轮（Math.sin（s.data.i/10）*50+50）]）
s、 data.points.shift（）；
s、 data.i++；
返回s；
});
}, 500);
}, []);
返回(
{
JSON.stringify（（new TimeSeries（_series.data））.collection（））
}

)
}

---

我可能也犯了一个错误，更新了状态中的键“I”，所以我尝试一次更新对象的多个部分。这是一种不好的做法吗？

问题是，当您通过修改原始状态来更改状态时，其值在原始引用处更新，因此react认为没有任何更改，因此不会重新呈现，这就是为什么在尝试更新状态时，希望将状态视为不可变状态

const{useState，useffect}=React；
常量应用=（）=>{
常量[_series，$series]=useState（（）=>{
让state={data:{“name”：“x”，“columns”：[“time”，“value”]，“points”：[]，“i”：0}
对于（设i=10；i>=0；i--）{state.data.points.push（[newdate（i）-（i*100），Math.round（Math.random（）*100）]）
返回状态；
})
useffect（（）=>{
常量间隔=设置间隔（（）=>{
$series（s=>{
返回{
s
数据：{
…美国数据，
i:s.data.i+1，
分数：[…s.data.points.slice（1），[新日期（s.data.i*1000），数学圆整（Math.sin（s.data.i/10）*50+50）]]
}
}
});
}, 500);
}, []);
返回(
{
JSON.stringify（_series.data）
}

)
}
ReactDOM.render（，document.getElementById（'app'））
返回{…s}
将创建一个新对象，以确保React知道它是一个新状态