React-vis + локальный CSV: ошибка при создании визуализации данных

Question

У меня возникают проблемы при создании диаграммы с помощью React-vis с локальным файлом CSV.

Приложение было сгенерировано с помощью "create-реагировать-приложение". Локальный файл CSV проанализирован с модулем d3.

Данные / test.csv

  'title', 'A', 'B'
  'E01', 1, 0
  'E02', 5, 0
  'E03', 10, 2

App.js

import React, {Component} from 'react';
import './App.css';
import Chart from './components/Chart';
import {csv} from 'd3-request';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {};
  }

  componentWillMount() {
    csv('./data/test.csv', (error, data) => {
      if (error) {
        this.setState({loadError: true});
      }
      this.setState({
        data: data.map(d => ({...d, x: Number(d.title), y: Number(d.A)}))
      });
    })
  }

  render() {

    if (this.state.loadError) {
      return <div>couldn't load file</div>;
    }

    if (!this.state.data) {
      return <div />;
    }

    return ( 

      <div className="App">
        <Chart data={this.state.data}/>
      </div>

    )
  }

}

export default App;

Chart.js

import React from 'react';
import {XYPlot, XAxis, YAxis, VerticalGridLines, HorizontalGridLines, LineSeries} from 'react-vis';

const Chart = (props) => {


  const dataArr = props.data
  console.log(dataArr);

  return (
      <XYPlot
          //xType="ordinal"
          width={1000}
          height={500}>
          <XAxis />
          <YAxis />
          <VerticalGridLines />
          <HorizontalGridLines />
          <LineSeries
                  data={dataArr}
                  style={{stroke: 'violet', strokeWidth: 3}}/>
      </XYPlot>
  );
}

export default Chart;

Страница пуста, а console.log возвращает HTML-структуру страницы. Сообщения об ошибках:

index.js: 2178 Предупреждение: компонентам функции без сохранения состояния не могут быть предоставлены ссылки. Попытки получить доступ к этой ссылке потерпят неудачу.

Проверьте метод визуализации XYPlot, в XAxis (в Chart.js:15) в svg (создан XYPlot) в div (создан XYPlot) в XYPlot (в Chart.js:11) в Chart (в App.js:40) в div (в App.js:39) в приложении (в index.js:7)

Диаграмма работает с поддельными данными.

Eg. { x: 1, y:0, x:10, y:5 }