如何使用 React JS 迭代由 Java 休眠 DAO 返回的列表，该 DAO 在 UI 中以 this.state

How to iterate over the list returned by a Java hibernate DAO that is accessed in UI as this.state.data using React JS?

本文关键字：DAO 列表 UI state this 中以 返回 JS React 何使用 迭代      更新时间：2023-09-26

这是返回列表的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')
        );      
    }

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

文本2

文本3

而不是

文本1文本2文本3

请帮助我。

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

反应：

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

反应原生：

render() {
  var data = this.state.data.map((d) => {
    return <Text>{d}</Text>
  })
  return <View>
           {data}
         </View>
}
相关文章：