Реагирующий компонент визуализируется, затем исчезает

Question

Извините заранее, если этот вопрос, если его трудно понять, - не совсем уверен, как его спросить.

В принципе, у меня есть два компонента React в моем представлении рельсов, которые принимают реквизиты «метрики» и «идентификатор».

<div class="col-lg-6"> 
     <%= react_component 'Chart', {initialList: current_user.lists.first, url: get_data_path, metric: 'click_rate', id: 'click-rate', title: 'Click Rates', user_id: current_user.id} %> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-lg-6"> 
     <%= react_component 'Chart', {initialList: current_user.lists.first, url: get_data_path, metric: 'open_count', id: 'open-count', title: 'Open Counts', user_id: current_user.id} %> 
    </div> 

В компоненте Chart он принимает метрику и делает вызов на сервер, чтобы захватить соответствующие данные. Хотя компоненты работают так, как им следует, проблема в том, что он будет отображать первый график, но когда он отображает второй, первый график исчезает.

Вот компонент Chart.js.jsx: https://gist.github.com/coffeejay/ea5cf8e8c3dcd09e58f6

Редактировать

Компонент Chart имеет еще один компонент, который называется FlotBar (на основе Flotchart) внутри него. Код: https://gist.github.com/coffeejay/1872d3d8bd1ddcb3c228

Спасибо за помощь!

Answer 1

У меня была аналогичная проблема сегодня. То, что оказалось для меня проблемой, было то, что React основывал свой код на моем пакете bundle.js, который компилировался Gulp, но Gulp прекратил компиляцию моего кода. Я перезапустил свой сервер и Gulp, и мой код исправил себя.

Перед тем, как React отобразит правильный код, а затем сразу же вернется к моему старому, дерьмовому коду. Только когда я начал делать кардинальные изменения в моем коде, я понял, что ничего не обновляется.

Если вы используете webpack, gulp, grunt или любой другой автокомпилятор, попробуйте перезагрузить, чтобы убедиться, что загружаемый код обновлен.