React on rails：遍历活动记录数组答案

【问题标题】：React on rails:Iterating through an array of activerecordReact on rails：遍历活动记录数组
【发布时间】：2018-02-03 23:37:37
【问题描述】：

我是 React with Rails 和使用 react-rails gem 的新手。

我正在尝试遍历所有升降机并通过升降机组件显示升降机名称。

控制器动作索引提供：

class LiftsController < ApplicationController

    def index
        @lifts = Lift.all
    end
end

在assets/javascripts/components 下我有一个lift.js.jsx 组件。

class Lifts extends React.Component {
  render() {
    const arr = {this.props.data}.map((x) => <li>Hello {x.liftname}!</li>);
    return (<ul>{arr}</ul>);    
  }
}

在视图页面中，我传递的数据如下图：

<%= react_component('Lifts', data: @lifts) %>

但是，我收到了错误：

SyntaxError: unknown: Unexpected token (3:20)
  1 | class Lifts extends React.Component {
  2 |   render() {
> 3 |       const arr = {this.props.data}.map((x) => <li>Hello {x.liftname}!</li>);
    |                     ^
  4 |       return (<ul>{arr}</ul>);    
  5 |   }
  6 | }

我的问题是：

我哪里出错了
是否有任何用于 react 的调试器可以提供除意外令牌之外的更多信息？

【问题讨论】：

标签： javascript ruby-on-rails ruby reactjs react-rails

【解决方案1】：

在第一种情况下，这行可能应该没有花括号，如下所示：

const arr = this.props.data.map((x) => <li>Hello {x.liftname}!</li>);

您还必须为每个 li 项目定义 key 属性，否则 React 会发出警告。

【讨论】：