Json ReactJS-从API访问数据时未定义

各位，提前向这个伟大的社区表示感谢

我已经用ReactJS创建了一个Web应用程序，它从API获取JSON，在本例中是一个包含特定电影所有细节的电影数据库，到目前为止，一切正常

当web应用程序尝试读取特定电影没有的数据时，在这种情况下，并非所有电影都有烂番茄评级，它崩溃了，我将对象分解为默认值，但如果找不到值，它仍然崩溃，有人能为我指出正确的方向吗

导出默认功能电影细节（道具）{
const imdbId=props.location.detailsProps；
常量[favorited，setFavorited]=使用状态（false）；
const[details，setDetails]=useState({
运行时：“”，
年份：''，
评级为：“”，
标题：“”，
评级：[{
来源：“”，
值：“”，
},
{
来源：“”，
值：“”，
},
],
情节：''，
演员：“，
类型：''，
董事：“，
});
useffect（（）=>{
apiCall（）；
}, [] );
常量showFavorite=（e）=>{
setFavorited（真）；
};
const apiCall=async（）=>{
常量url=http://www.omdbapi.com/?i=“+imdbId.id+”&apikey=536a34c3'；
console.log（imdbId.id）；
const response=wait axios.get（url）
.then（（response）=>setDetails（response.data））；
};
如果（！details）返回空值；
返回(
{details.Runtime}

{详情。年份}

{details.Rated}
{details.Title}
{details.Ratings[0].Value}
{details.Ratings[1].Value}
添加到收藏夹
补充
情节
{details.Plot}
铸造
{details.Actors}
体裁
{details.Genre}
经理
{详细信息.主任}
);
}

{details.Ratings[0]。Value==未定义的| | null？{details.Ratings[0]。Value}:null}

{details.Ratings[0]。Value==未定义的| | null？{details.Ratings[0]。Value}:null}

不要将

和
异步/等待混用

const apiCall = async () => {
    const url = 'http://www.omdbapi.com/?i='+imdbId.id+'&apikey=536a34c3';
    console.log(imdbId.id);
    try {
      const response = await axios.get(url)
       setDetails(response.data)
    } catch(err) {
       console.log(err)
    }
  };

还为
评级添加安全检查


<div className="rottenImdb">
        <img src={imdbLogo} alt="imdbLogo" />
        { 
           details.Ratings && details.Ratings[0] ? (<h2>{details.Ratings[0].Value}</h2>) : null
        }
        <img src={rottenLogo} alt="rottenLogo" className="rotten"/>
       {
          details.Ratings && details.Ratings[1] ? (<h2>{details.Ratings[1].Value}</h2>) : null
       }
      
      </div>



{ 
details.Ratings&&details.Ratings[0]？（{details.Ratings[0].Value}）：null
}
{
details.Ratings&&details.Ratings[1]？（{details.Ratings[1].Value}）：null
}
不要将
和
异步/等待混用

const apiCall = async () => {
    const url = 'http://www.omdbapi.com/?i='+imdbId.id+'&apikey=536a34c3';
    console.log(imdbId.id);
    try {
      const response = await axios.get(url)
       setDetails(response.data)
    } catch(err) {
       console.log(err)
    }
  };

还为
评级添加安全检查


<div className="rottenImdb">
        <img src={imdbLogo} alt="imdbLogo" />
        { 
           details.Ratings && details.Ratings[0] ? (<h2>{details.Ratings[0].Value}</h2>) : null
        }
        <img src={rottenLogo} alt="rottenLogo" className="rotten"/>
       {
          details.Ratings && details.Ratings[1] ? (<h2>{details.Ratings[1].Value}</h2>) : null
       }
      
      </div>



{ 
details.Ratings&&details.Ratings[0]？（{details.Ratings[0].Value}）：null
}
{
details.Ratings&&details.Ratings[1]？（{details.Ratings[1].Value}）：null
}
谢谢你的帮助，纳伦。工作得很好！谢谢你的帮助，纳伦。工作得很好！