Javascript 无法呈现值数组（React组件）

我正在构建一个测试应用程序来了解更多关于React的信息，我已经进行了一个API调用，该调用获取了一个巨大的JSON对象。 我能够将这个json分解成我需要的部分，现在我有10个数组，每个数组有3个道具。我能够用3个道具将这10个阵列发送到另一个组件，该组件需要使用这3个道具10次，并分别渲染一张div类卡

我可以console.logthis.props，它显示了10个不同的数组，每个数组有3个props，但是，我不能10次生成同一个元素。。我尝试使用map，但由于我的数组最初未定义，map也无法正常工作。在react中有什么东西像*ngFor在Angular中吗

最好的办法是什么

*编辑 这里有更多的代码人员。对不起，这里还没人

错误：this.props.map不是函数

我在每个数据流上设置值，如下所示：

const pics = await fetch(`${base_url}?key=${api_key}&q=${query}
            &img_type=photo&per_page=12`).then(response => {
                    return response.json();
                })

            pics.hits.map((data) =>{
                return this.setState({
                    userId: data.user_id,
                    likes: data.likes,
                    url: data.webformatURL
                })
            })

---

由于您提供的信息很少，我猜当您尝试使用未定义值的map时，代码在map处失败。 尝试添加条件检查以渲染

---

{props&&props.map[RENDER CODE HERE]}

您只需使用简单的if语句检查数组是否未定义，然后将其传递给map函数即可

另一个选项是为空数组设置defaultProps

MyComponent.defaultProps = {
  arrProp: []
};

这个.props没有地图，它不是数组。它是一个对象，每个传递给组件的属性都有一个属性。例如：

<YourComponent foo="bar"/>

…然后您需要该属性的名称：

return (
    <div>            
        {this.props.theArrayProperty.map((data,i) => {
            return (
                <li key={i}>{data.likes}</li>
            );
        })}
    </div>
    );

…并且不需要，如果您将开始标记放在带有返回的行上，那么您不能取消下一行的if，但您可能知道：

return <div>            
        {this.props.theArrayProperty.map((data,i) => <li key={i}>{data.likes}</li>)}
    </div>;

---

…但这是风格的问题。

嗨！请拿着，四处看看，并通读，特别是我们无法帮助您处理我们看不到的代码。请使用演示问题的示例更新您的问题，最好是使用[]工具栏按钮上的堆栈片段来运行问题。堆栈代码段支持React，包括JSX。你还没有告诉我们你是如何设置道具的，这非常重要。再次：请用一个演示问题的示例更新您的问题，最好是使用[]工具栏按钮上的堆栈片段运行的问题。堆栈代码段支持React，包括JSX。是的，但也不管用。。一开始我也试过空字符串。是的，你是对的，这是一个愚蠢的错误，但即使使用Arrayproperty，我仍然无法使函数工作。。我收到一个类型错误，说this.props.likes.map不是一个函数。@YashankVarshney-这是第三次：请用演示问题的代码更新您的问题，最好是使用[]工具栏按钮的堆栈片段运行的问题。堆栈代码段支持React，包括JSX。

<YourComponent foo="bar"/>

<YourComponent theArrayProperty={[{likes: 42},{likes:27}]} />

return (
    <div>            
        {this.props.theArrayProperty.map((data,i) => {
            return (
                <li key={i}>{data.likes}</li>
            );
        })}
    </div>
    );

return (
    <div>            
        {this.props.theArrayProperty.map((data,i) => <li key={i}>{data.likes}</li>)}
    </div>
    );

return <div>            
        {this.props.theArrayProperty.map((data,i) => <li key={i}>{data.likes}</li>)}
    </div>;