React 组件正在渲染，然后消失

Question

如果这个问题难以理解，请提前抱歉 - 不确定如何提问。

基本上，我的 rails 视图中有两个 React 组件，它们采用“metric”和“id”的 props。

    <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.js.jsx 组件：https://gist.github.com/coffeejay/ea5cf8e8c3dcd09e58f6

编辑

Chart 组件内部还有另一个名为 FlotBar 的组件（基于 Flotchart）。代码：https://gist.github.com/coffeejay/1872d3d8bd1ddcb3c228

感谢您的帮助！

Answer 1

我今天遇到了类似的问题。对我来说最终的问题是，React 的代码基于我的 bundle.js，而我的 bundle.js 是由 Gulp 编译的——但 Gulp 已经停止编译我的代码。我重新启动了我的服务器和 Gulp，我的代码自行修复了。

在 React 之前会渲染正确的代码，然后立即切换回我旧的、糟糕的代码。直到我开始对我的代码进行重大更改，我才意识到没有任何更新。

如果您正在使用 webpack、gulp、grunt 或任何其他自动编译器，请尝试重新启动以确保您正在加载的代码是最新的。