通过 activerecord 数组对 rails:Iterating 做出反应

Question

我是使用 Rails 和 react-rails gem.

的 React 新手

我正在尝试遍历所有电梯并通过电梯组件显示电梯名称。

控制器动作索引提供：

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 | }

我的问题是：

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

Answer 1

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

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

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

通过 activerecord 数组对 rails:Iterating 做出反应

React on rails:Iterating through an array of activerecord

javascript

ruby

ruby-on-rails

reactjs

react-rails