Question

我是React的新手，我真的很挣扎。

我想创建一个小应用：

从我的data.js文件（对象）中读取数据
将每个子对象信息输出到card组件

我创建了一个名为Lister的组件，用于导入数据，并使用forEach进行迭代。

然后，我想调用Card组件并在此组件的页面上为每个子对象输出数据。

但是我一直收到错误，即我render组件中的Lister没有返回任何内容。

这是一个小组件，所以在这里它是完整的：

import React from 'react';
import data from "../../data/data";
import Card from "../card";

class Lister extends React.Component {
    render() {
        return (
            Object.keys(data()).forEach(function(key) {
                <Card data={data()[key]}/>
            })
        )
    }

}

export default Lister;

Answer 1

对于React，您需要使用.map来处理循环。此外，只要您使用JSX，请记住添加打开和关闭花括号{}（您在对象之前缺少一个）。最后，render内部返回的所有内容都需要包含在单个根节点中，例如<div>。

以下是您可以重写此内容的示例：

import React from 'react';
import data from "../../data/data";
import Card from "../card";

class Lister extends React.Component {
    render() {
        const items = data();
        return (
            <div>
                {Object.keys(items).map(function(key, index) {
                    return <Card key={index} data={items[key]}/>
                })}
            </div>
        );
    }

}

export default Lister;

Answer 2

I think you should use .map instead of .forEach. With .forEach, you can handle that like this:

render() {
  const items = data();
  let cards=[];

  Object.keys(items).forEach(function(key,i) {              
      objArray.push(<Card key={i} data={items[key]})
  });

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

Render没有返回任何数据 - 尝试在forEach中多次调用组件

2 个答案: