Javascript 功能组件与对象迭代

我需要关于对象迭代的帮助，通常我可以循环一个数组，但我以前没有处理过一个对象

在基于类的组件中，我有

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>
}

const MovieDetails=（道具）=>{
const arrayofKey=Object.keys（props.itemDetails）.map（（r）=>{


})
返回
{arrayofKey}
}

我当前遇到的错误是：

应为赋值或函数调用，而应为表达式。（没有未使用的表达式）

---

我只想对渲染我需要的数据、名称、标题等做出反应，请小心使用箭头函数。与其他语言不同，代码块中的最后一个表达式不会自动返回。改变

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）=>{


})

…致：

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）=>(


))

---

第二个函数有一个表达式作为arrow函数的右侧。前者有一个缺少返回的语句块。或者，您可以在

表达式之前添加

return

。

小心使用箭头函数。与其他语言不同，代码块中的最后一个表达式不会自动返回。改变

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）=>{


})

…致：

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）=>(


))

---

第二个函数有一个表达式作为arrow函数的右侧。前者有一个缺少返回的语句块。或者，您可以在

表达式之前添加

返回值。
您的map函数有一个小错误：

.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>
  })

这是“并返回此对象”的缩写
 您的地图功能有一个小错误：

.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>
  })

这是“并返回此对象”的缩写
 变化

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

改变

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

尝试从
.map
回调返回该JSX。尝试从
.map
回调返回该JSX。我在“const arrayofKey=object…”行收到错误。类型错误：无法将未定义或null转换为object@invrt：似乎与此更改无关，而是意味着
props.itemDetails
是
null
或
未定义
。是的，我的错，我没有在父组件中传递道具。现在开始工作了！我在“const arrayofKey=object…”行上遇到错误。TypeError:无法将未定义或null转换为object@invrt：似乎与此更改无关，而是意味着
props。itemDetails
为
null
或
未定义
。是的，我的错，我没有在父组件中传递props。现在开始工作了！现在开始工作，干杯！现在开始工作，干杯！