如果传入对象(来自 http 请求)没有某个数组，您如何捕获？(反应JS)

Question

我正在从API获取对象(具有文本值和几个数组)并将其传输到本地变量以供使用。一切正常，只有当我取回的对象没有这些数组时，我试图使用它，整个网站崩溃。我不知道如何在这里做错误处理。

import React, { useEffect, useState } from 'react'
import classes from './Streaming.module.css'
const Streaming = (props) => {
const [streamingOn, setStreamingOn] = useState(false)
const [streamingData, setStreamingData] = useState(null)   

async function receiveStreaming() {
await fetch(`https://api.themoviedb.org/3/movie/${props.movie}/watch/providers? 
api_key=35135143f12a5c114d5d09d17dfcea12`)
.then(res => res.json())
.then(result => {
setStreamingData(result.results.US)   
setStreamingOn(true)
}, (error) => {
console.error("Error: ", error)  
}
)

// console.log(data)


}

const displayStreaming = streamingData => {   
let sortedData = { ...streamingData }
let streamData = sortedData.flatrate
let rentData = sortedData.rent
let linkText = streamingData.link
let id = Math.random()
let streamListItems = streamData.map((movie) =>
<li key={id}>    
<a href={linkText}><img className={classes.logoimg} src=. {'https://image.tmdb.org/t/p/w500/' + movie.logo_path}></img></a>
</li>) 
let rentListItems = rentData.map((movie) =>
<li key={id}>

<a href={linkText}><img className={classes.logoimg} src={'https://image.tmdb.org/t/p/w500/' + movie.logo_path}></img></a>
</li>)

return (
<React.Fragment>
<p>Stream on</p>
<ul className={classes.logolist}>{streamListItems}</ul>
<p>Rent on</p>
<ul className={classes.logolist}>{rentListItems}</ul>
</React.Fragment>

)
// console.log(sortedData)
}

return (
<React.Fragment>
<button onClick={receiveStreaming}></button>
{<div className={classes.streaminglogos}>  
{(streamingOn) && <div>{displayStreaming(streamingData)}</div> }
</div>}
</React.Fragment>

)
}
export default Streaming

Answer 1

使用可选链接来检查期望的数组是否已接收。

假设您需要在未收到预期数组时显示错误UI，那么您可以将标志(isErrored)设置为true并有条件地呈现。

• 处理JSON响应的

if (!result?.results?.US) {
setIsErrored(true);
} else {
setStreamingData(result.results.US) 
setStreamingOn(true);
}

• 渲染错误UI有条件

{isErrored && (<ErrorUI />)}

Answer 2

您可以在这里做一些事情。首先，你可以在第一次获取数组时检查它是否存在，如果不存在，就把它附加到数组上。比如:

if(!result.results.US){
result.results.US = []
}

或者您可以在显示数据时通过有条件地呈现组件(或组件的一部分)来检查数组是否存在。如果数据不包含数组(使用上述方法)，则不显示它。

希望这对你有帮助!