React on rails:遍历一个 activerecord 数组

Question

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

我的问题是：

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

Answer 1

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

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

你还必须为每个li项目定义key道具，否则 React 会发出警告。