MobX与胜利图表，与商店更新图表

Question

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

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

呈现空白而不是图表。这是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() }
    />