MobX with Victory Charts，用商店更新图表

Question

我想用 chartStore.js 中的图表数据更新 index.js 中的 Candlestickchart。到目前为止，图表是一个空对象。代码简短而基础。

如果我将图表数据粘贴到 index.js，图表将呈现。

呈现空 space 而不是图表。这是 MobX 开发者工具的输出：

--- chartStore.js ---

import { action, observable } from 'mobx';

class ChartStore {
  @observable chartData = [
    {open: 5, close: 10, high: 15, low: 0},
    {open: 10, close: 15, high: 20, low: 5},
    {open: 15, close: 20, high: 22, low: 10},
    {open: 20, close: 10, high: 25, low: 7},
    {open: 10, close: 8, high: 15, low: 5}
  ]

  constructor(rootStore) {
    this.rootStore = rootStore;
  }

}

export default ChartStore;

--- index.js ---

import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import { compose } from 'recompose';
import { VictoryCandlestick } from 'victory';

class CandlestickChart extends Component {
  render() {
    return (
      <div>
        <h1>Chart</h1>
        <VictoryCandlestick
          data={this.props.chartStore.chartData}
        />
      </div>
    )
  }
}

export default compose(
  inject('chartStore'),
  observer
)(CandlestickChart);

Answer 1

终于找到答案了。只需将 .slice() 添加到此 ...

    <VictoryCandlestick
      data={ this.props.chartStore.chartData.slice() }
    />

MobX with Victory Charts，用商店更新图表

MobX with Victory Charts, update chart with store

javascript

reactjs

mobx

mobx-react