功能组件和对象迭代答案

【问题标题】：Functional Component and object iteration功能组件和对象迭代
【发布时间】：2018-12-17 23:39:59
【问题描述】：

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

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

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 来呈现我需要的数据、姓名、标题等

【问题讨论】：

尝试从 .map 回调中返回 JSX。

标签： javascript json reactjs ecmascript-6

【解决方案1】：

改变

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

我在 'const arrayofKey = object....' 行出现错误 TypeError: Cannot convert undefined or null to object
@invrt：似乎与此更改无关，而是意味着props.itemDetails 是null 或undefined。
是的，我的错，我没有在父组件中传递道具。它现在正在工作！

【解决方案3】：

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

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

这是“并返回此对象”的简写。

【讨论】：

现在工作，干杯！