Question

功能组件和对象值

2018-12-18

113

javascript json reactjs ecmascript-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.values(props.itemDetails).map((r) => (
    <div>
      <a href='#t' className='item-name'>{r.original_title}</a>
    </div>
  ))
  return <div className='item-details'>{arrayofKey}</div>
}

它旨在返回 original_title (Aquaman) 的值，但是我收到错误“TypeError：无法读取 null 的属性‘original_title’”

如能得到任何帮助，我们将不胜感激

Answer 1

以下内容仅显示标题即可。

const MovieDetails = (props) => {
  const {itemDetails} = props; 
  return (
    <div className='item-details'>
      <a href='#t' className='item-name'>{itemDetails.original_title}</a>
    </div>
  );
}

Answer 2

从您的评论中，我了解到您试图实现的只是此代码：

const MovieDetails = (props) => {
  return <div className='item-details'>
    <div>
      <a href='#t' className='item-name'>{props.itemDetails.original_title}</a>
    </div>
  </div>
}

由于某些未知原因，您在此处使用了冗余且错误的代码。我只是将其删除并将带有标题的 div 移出循环。