Javascript 微型组件isn'；t显示

我有一个组成部分：

从“React”导入{React，useState}；
功能CreateNews（道具）{
函数createList（新闻）{
新闻论坛（el=>{
常量含量=el含量；
返回(
{content.headline}
{content.body}
{content.tags}
);
});
}
返回(
{createList（props.news）}
);
}
导出默认的CreateNews；

由于某种原因，页面上的

新闻块

为空

为什么

div.news

没有出现在其中？

您有两个问题：

没有返回任何有用的内容，它返回

未定义的

，因此在

.forEach（）

回调函数中执行

返回

，效果不大

即使

.forEach（）

确实返回了一些代码仍然无法工作的内容，因为

createList

函数也不会返回任何内容（您当前返回的是forEach回调，而不是createList函数）

您可以使用该方法而不是

.forEach（）

。

.map（）

方法获取数组中的元素

x

，并将其转换为新元素

y

。这个新的转换元素数组然后由

.map（）

返回，然后您的

createList（）

函数可以返回：

function createList(news_) {
  return news_.map(el => {
    const content = el.content;
    return (
      <div className="news">
        <h3 className="heading">{ content.headline }</h3>
        <div className="description">{ content.body }</div>
        <div className="tags">{ content.tags }</div>
        <a href={`http://localhost:5500/api/news/get/${el.id}`} className="toNews">ссылка</a>
      </div>
    );
  });
}

函数createList（新闻）{
返回新闻地图（el=>{
常量含量=el含量；
返回(
{content.headline}
{content.body}
{content.tags}
);
});
}

您有两个问题：

没有返回任何有用的内容，它返回

未定义的

，因此在

.forEach（）

回调函数中执行

返回

，效果不大

即使

.forEach（）

确实返回了一些代码仍然无法工作的内容，因为

createList

函数也不会返回任何内容（您当前返回的是forEach回调，而不是createList函数）

您可以使用该方法而不是

.forEach（）

。

.map（）

方法获取数组中的元素

x

，并将其转换为新元素

y

。这个新的转换元素数组然后由

.map（）

返回，然后您的

createList（）

函数可以返回：

function createList(news_) {
  return news_.map(el => {
    const content = el.content;
    return (
      <div className="news">
        <h3 className="heading">{ content.headline }</h3>
        <div className="description">{ content.body }</div>
        <div className="tags">{ content.tags }</div>
        <a href={`http://localhost:5500/api/news/get/${el.id}`} className="toNews">ссылка</a>
      </div>
    );
  });
}

函数createList（新闻）{
返回新闻地图（el=>{
常量含量=el含量；
返回(
{content.headline}
{content.body}
{content.tags}
);
});
}