首页 > 解决方案 > 功能组件和对象值

问题描述

我正在做一个附带项目,我正在努力打印出对象值。

我的代码布局如下:

基于类的组件

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: Cannot read property 'original_title' of null”

任何帮助,将不胜感激

标签: javascriptjsonreactjsecmascript-6

解决方案


以下内容足以显示标题。

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

推荐阅读