Question

我的函数renderTitles应该从我从API获得的数组中输出许多带有标题的引导卡。我之前已经测试过，并且数组及其所有数据都在那里。问题是当我调用renderTitles函数时，它不会输出任何内容。

我尝试了许多地图功能示例，但都没有成功

renderTitles = () => {
  return this.state.popularMovies.map(t => {
    return (
      <div class="container">
        <div class="card" style={{ width: "12rem" }}>
          <div class="card-body">
            <img
              class="card-img-top"
              src="http://image.tmdb.org/t/p/w342/iflq7ZJfso6WC7gk9l1tD3unWK.jpg"
            />
            <h5 class="card-title">t.title</h5>
          </div>
        </div>
      </div>
    );
  });
};

预计将在引导卡中输出所有标题，每个标题一个。

Answer 1

尝试将要打印的数据包装在{}中，例如：

<h5 class="card-title">
    {t.title}
</h5>

另外：调用renderTitles函数时，请确保将其也包装在{}中：

<div class="all-my-titles">
    {this.renderTitles()}
</div>

Answer 2

如果有帮助，请尝试

renderTitles = () =>{
  return  this.state.popularMovies.map((t)=>(
      <div class="container">
        <div class="card" style={{width: '12rem'}}>
            <div class="card-body">
                <img class="card-img-top" src="http://image.tmdb.org/t/p/w342/iflq7ZJfso6WC7gk9l1tD3unWK.jpg"/>
                <h5 class="card-title">
                    {t.title}
                </h5>
            </div>
        </div>
      </div>
    ))
}

Answer 3

您需要将renderTitles和t.title的输出都包装在{}中。

Reference

为什么我的renderTitles函数不使用地图来渲染列表？

3 个答案: