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

您需要在地图函数中添加返回值。

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

Answer 2

使用{}时，地图函数不返回任何内容。您有两种选择：

1-尝试使用（）代替{}：

std::end(perfects)

2-在每次迭代中返回该项目：

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

React--Div存在，但是空的，还有更多问题

2 个答案: