2

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

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

    <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

谢谢您的帮助！

4

1 回答 1

1

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

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

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

于 2015-08-08T21:41:59.503 回答