Javascript 当React中的状态更改时,HighCharts不更新
我正在开发一个快速程序,从酶反应中提取数据并绘制成图表。我遇到了这个问题,如果我用道具传递数据,我的highcharts组件将不会更新。我可以在控制台中看到状态中的数据正在更改,但在图表上看不到任何内容 图形组件:Javascript 当React中的状态更改时,HighCharts不更新,javascript,reactjs,highcharts,react-highcharts,Javascript,Reactjs,Highcharts,React Highcharts,我正在开发一个快速程序,从酶反应中提取数据并绘制成图表。我遇到了这个问题,如果我用道具传递数据,我的highcharts组件将不会更新。我可以在控制台中看到状态中的数据正在更改,但在图表上看不到任何内容 图形组件: class HighGraph extends Component { state = { title: { text: "My chart" }, series: [ { data: [1, 2, 3]
class HighGraph extends Component {
state = {
title: {
text: "My chart"
},
series: [
{
data: [1, 2, 3]
}
]
};
componentDidMount() {
let _this = this;
_this.interval = setInterval(function() {
console.log(_this.state.series[0].data);
_this.state.series[0].data = _this.props.list;
}, 2000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
render() {
return (
<div>
<HighchartsReact highcharts={Highcharts} options={this.state} />
</div>
);
}
}
export default HighGraph;
有什么想法吗?不管控制台告诉我状态已更改,我仍然在图表中看到1,2,3。如果不调用
this.setState()
方法,React将不会触发使用新数据重新渲染
尝试更改组件didmount
中的行
它看起来像这样:
componentDidMount() {
let _this = this;
_this.interval = setInterval(function() {
console.log(_this.state.series[0].data);
_this.setState({ series: [{ data: _this.props.list }] });
}, 2000);
}
在HighchartsReact组件中,您需要提供一个名为
oneToOne
的道具,并将其设置为true
<HighchartsReact highcharts={Highcharts} options={this.state} oneToOne={true} />
这会告诉组件在通过状态或属性数据显示新数据时重新渲染
参考:设置updateArgs对我有效,记录在
我一直在处理一些类似的问题,其中我尝试了许多相同的建议,添加
oneToOne={true}
和updateArgs={[true,true,true]}
在我的应用程序中,我使用React上下文api和useReducer来存储图表选项。通过将序列部分从序列数组更改为单个序列对象,我成功地重新渲染了图表
你所在州的例子
state = {
title: {
text: "My chart"
},
series: [
{
data: [1, 2, 3]
}
]
};
你可以试着换成
state = {
title: {
text: "My chart"
},
series:
{
data: [1, 2, 3]
}
};
由于某些原因,在尝试更改访问序列数组的状态时,它不会触发重新渲染。也可以更改整个系列的状态,而不是访问
state.series[0]
进行更新。希望这是有意义的。我会把我自己的经验加进去,希望这能帮助别人。出于某种莫名其妙的原因,我完成这项工作的唯一方法就是使用该系列的索引。此代码有效,图表更新无需任何上述道具:
currentSeries.forEach((s, i) => {
if (s.name === e?.target?.name || forceReset) {
if (forceReset) {
setIsFilterMode(false);
}
currentSeries[i].visible = true;
return;
}
currentSeries[i].visible = !currentSeries[i].visible;
该点是通过索引访问每个系列的visible
属性。
此代码不起作用,且上述各项均无效:
currentSeries.forEach((s, i) => {
if (s.name === e?.target?.name || forceReset) {
if (forceReset) {
setIsFilterMode(false);
}
s.visible = true;
return;
}
s.visible = !s.visible;
state = {
title: {
text: "My chart"
},
series:
{
data: [1, 2, 3]
}
};
currentSeries.forEach((s, i) => {
if (s.name === e?.target?.name || forceReset) {
if (forceReset) {
setIsFilterMode(false);
}
currentSeries[i].visible = true;
return;
}
currentSeries[i].visible = !currentSeries[i].visible;
currentSeries.forEach((s, i) => {
if (s.name === e?.target?.name || forceReset) {
if (forceReset) {
setIsFilterMode(false);
}
s.visible = true;
return;
}
s.visible = !s.visible;