javascript - 功能组件和对象迭代

Question

这个问题已经有答案了:

When should I use a return statement in ES6 arrow functions (6 个回答)

已关闭 6 个月前。

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

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

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

改变

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