javascript - 如何使用 React JS 迭代在 UI 中作为 this.state.data 访问的 Java hibernate DAO 返回的列表？

Question

这是返回列表的java代码

@Override
public List get_News(String lang) {
    Session session = this.sessionFactory.getCurrentSession();
    Query query =  session.createQuery("select n.text from tableName n where n.lang=:lang");
    query.setParameter("lang", lang);

    List result = query.list();

    if(result != null){
        if(result.iterator().hasNext()){
            return result;   //this is the result that is being returned
        }
    }
    return null;
}

以下是 React JS 代码

var Comment = React.createClass({
      displayName: "Comment",
      loadCommentsFromServer: function loadCommentsFromServer() {
            $.ajax({
              url: "/abc/ages",
              dataType: 'json',
              cache: true,
              success: function(data) {
                this.setState({data: data});
              }.bind(this),
              error: function(xhr, status, err) {
                }.bind(this)
            });
          },
      getInitialState: function(){
        return {data: []};
      },
      componentDidMount: function componentDidMount() {
          this.loadCommentsFromServer();

      },
      render: function render() {
        return React.createElement("div",{ className: "comment" },
          React.createElement("div", { },  this.state.data)   //I want to iterate over this data
        );
      }
    }); 

    function RenderComment(){
  ReactDOM.render(React.createElement("div", {}, React.createElement(Comment,{})),
                document.getElementById('content')
        );      
    } 

截至目前，我正在从数据库中获取所有文本，但所有行都显示为单个数据 block 。我想遍历数据并显示为 文字1

文本2

文本3

而不是

文字1 文字2 文本3

请帮帮我。

Answer 1

如果数据是一个数组，你可以做这样的事情(不确定你使用的是 react 还是 react native):

react :

render() {

  var data = this.state.data.map((d) => {
    return <p>{d}</p>
  })

  return <div>
           {data}
         </div>

}

React Native:

render() {

  var data = this.state.data.map((d) => {
    return <Text>{d}</Text>
  })

  return <View>
           {data}
         </View>

}