React--Div 存在，但为空且存在更多问题

Question

我正在使用下面的代码从 JSON 文件中提取数据列表，以便用 News 填充网页。但是，根据我所拥有的， div 当我检查它时是空的，我不确定为什么。当我尝试其他解决方案时，出现错误或相同的输出。

const newsList = labNewsJson['news']

class News extends Component {
  render() {
    const news = newsList.map((newsItem) => {
      <div>{newsItem}</div>
    });

    return (
      <div className='container'>
        <h1>Lab News</h1>
        <div>{news}</div>
      </div>
    );
  }
}

export default News;

Answer 1

您需要在地图函数中添加一个 return。

const news = newsList.map((newsItem, index) => {
  return <div key={index}>{newsItem.title}</div>
});

Answer 2

当您使用 {} 时，映射函数不会 return 任何东西。您有两个选择：

1- 尝试使用 () 而不是 {}:

const news = newsList.map((newsItem) => (
    <div>{newsItem}</div>
))

2- Return 每次迭代中的项目：

const news = newsList.map((newsItem) => {
    return <div>{newsItem}</div>
})

React--Div 存在，但为空且存在更多问题

React--Div exists, but is empty & more problems

json

reactjs

map-function