reactjs - 更新嵌套对象时 UseState 不重新渲染
问题描述
我通过将数据推送到旧状态对象并将其作为值返回来更新 useEffect。
这段代码实际上改变了 useState() 中的 _series 变量,但没有发生重新渲染,为什么?
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" />
推荐阅读
- firebase - 简单约会应用程序:为路径指定的安全规则
- python - Seaborn 热图:使用可点击的超链接进行注释
- javascript - ajax django表单仅提交部分数据
- python - Django - 即时创建 CSV 并将其保存到文件系统和模型文件字段
- django - 我应该如何使用 DRF 发布和序列化数组?
- .net - 为秒表添加时间
- python - 如何在实例变量的更改上执行代码?
- python-3.x - Python 3套接字客户端未连接到服务器
- javascript - 在我的机器和 AWS-Lambda 上工作时,Node.js 函数会给出不同的结果
- highcharts - Highcharts 系列未加载