javascript - 在 rails 上使用react :Iterating through an array of activerecord

Question

我不熟悉 React with Rails 和 react-rails gem 的使用。

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

Controller Action 索引提供:

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

在 View 页面中，我传递的数据如下所示:

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

我的问题是:

1. 哪里出了问题
2. 是否有任何调试器可以提供除意外 token 之外的更多信息？

Answer 1

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

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

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