Question

所以这是设置：

我有简单的nodejs后端（基于express和mongoose），它使用一些JSON（以对象的Object形式）响应GET请求。

因此，在得到响应之后，我想为所述对象对象的每个元素渲染一个组件。如果是数组，我可以简单地使用array.map（），并在回调函数中渲染一个组件。但是，由于我拥有的是Object，我无法使用它。

所以...我应该从后端返回和Array。如果是这样，我怎么告诉mongoose以数组的形式返回model.find（）的结果。

或者我应该将对象转换为前端的数组？在这种情况下，如何在不通过某种循环的情况下进行此操作？

最后，我试着让它像这样工作：

render: function() {
    //console.log('render TodoList componenr');
    var items = this.state.todoItems;
    return(
        <ul>
            {for (var item in items){
                console.log(item);
            }}
        </ul>
        ); 
}

我收到此错误：

Uncaught SyntaxError: embedded: Unexpected token (30:9)
  28 |                  return(
  29 |                      <ul>
> 30 |                              {for (var item in items){
     |          ^
  31 |                                  
  32 |                              }}
  33 |                      </ul>

哪个超级奇怪，因为它指向空位？

任何想法如何使这项工作？

Answer 1

要迭代一个对象，你可以像这样使用Object.keys：

Object.keys(yourObject).map(function(key) {
    return renderItem(yourObject[key]);
});

该方法返回给定对象自己的可枚举属性的数组，其顺序与for ... in循环提供的顺序相同（不同之处在于for-in循环也枚举了原型链中的属性）

IE＆gt; = 9支持，Chrome＆gt; = 5，Safari＆gt; = 5，Firefox＆gt; = 4。

Answer 2

你可以将object.map函数设置为等于return函数之外的变量，然后返回该变量。

render() {

    var article = this.props.article;


    var articleNodes = article.map(function(article, key){
            if(article.iurl == ""){
                article.iurl = "basketball.jpg";
            };

            return(
            <li key={key}>
                <Image item={article}/>
                <div className="post-basic-info">
                    <h3><a target="_blank" href={article.url}>{article.title}</a></h3>
                    <span><a href="#"><label> </label>{article.team}</a></span>
                    <p>{article.description}</p>
                </div>
            </li>
            )
        });

    return(
            <div>
                {articleNodes}
            </div>
        )
}

如何在React中使用JSON对象

2 个答案: