功能组件和对象迭代

Question

我需要对象迭代方面的帮助，通常我可以循环遍历一个数组，但是之前没有处理过单个对象。

在基于类的组件中，我有这个

this.state = {
  itemDetails: []
};

axios.get(`${ROOT_URL}/${itemId}?${API_KEY}`).then(res => {
  console.log(res.data);
  this.setState({ itemDetails: res.data })
});

这将返回类似于

的JSON数据

我有一个类似这样的功能组件

const MovieDetails = (props) => {
  const arrayofKey = Object.keys(props.itemDetails).map((r) => {
    <li
      key={r.id} >
      <a href='#t' className='rating'><i className='fas fa-star fa-fw' />{r.vote_average}</a>
      <img src={`https://image.tmdb.org/t/p/w185/${r.poster_path}`} alt={r.title} className='search-results-poster' />
      <a href='#t' className='search-results-name'>{r.name}</a>
      <a href='#t' className='search-results-title'>{r.title}</a>
    </li>
  })
  return <ul className='search-results'>{arrayofKey}</ul>
}

我当前遇到的错误是：

期望了一个赋值或函数调用，而是看到了一个表达式。 （没有未使用的表达式）

我只想用React渲染我需要的数据，名称，标题等

Answer 1

小心箭头功能。与其他语言不同，代码块中的最后一个表达式不会自动返回。更改

const arrayofKey = Object.keys(props.itemDetails).map((r) => {
  <li
    key={r.id} >
    <a href='#t' className='rating'><i className='fas fa-star fa-fw' />{r.vote_average}</a>
    <img src={`https://image.tmdb.org/t/p/w185/${r.poster_path}`} alt={r.title} className='search-results-poster' />
    <a href='#t' className='search-results-name'>{r.name}</a>
    <a href='#t' className='search-results-title'>{r.title}</a>
  </li>
})

...至：

const arrayofKey = Object.keys(props.itemDetails).map((r) => (
  <li
    key={r.id} >
    <a href='#t' className='rating'><i className='fas fa-star fa-fw' />{r.vote_average}</a>
    <img src={`https://image.tmdb.org/t/p/w185/${r.poster_path}`} alt={r.title} className='search-results-poster' />
    <a href='#t' className='search-results-name'>{r.name}</a>
    <a href='#t' className='search-results-title'>{r.title}</a>
  </li>
))

第二个具有 expression 作为箭头功能的右侧。前者有一个语句块，缺少返回值。或者，您可以在return表达式之前添加<li/>。

Answer 2

您的地图功能有一个小错误：

.map((r) =>{
    <li
      key={r.id} >
      <a href='#t' className='rating'><i className='fas fa-star fa-fw' />{r.vote_average}</a>
      <img src={`https://image.tmdb.org/t/p/w185/${r.poster_path}`} alt={r.title} className='search-results-poster' />
      <a href='#t' className='search-results-name'>{r.name}</a>
      <a href='#t' className='search-results-title'>{r.title}</a>
    </li>
  })

在这里，您已声明一个函数(r) => {，该函数不返回任何内容。

代替使用：

.map((r) =>(
    <li
      key={r.id} >
      <a href='#t' className='rating'><i className='fas fa-star fa-fw' />{r.vote_average}</a>
      <img src={`https://image.tmdb.org/t/p/w185/${r.poster_path}`} alt={r.title} className='search-results-poster' />
      <a href='#t' className='search-results-name'>{r.name}</a>
      <a href='#t' className='search-results-title'>{r.title}</a>
    </li>
  ))

“并返回此对象”的缩写。

Answer 3

更改

.map((r) => { ... }) to .map((r) => ( ... ))