时间戳

首页 > 解决方案 > 当客户端没有从 API 获取数据时返回一个组件？

javascript - 当客户端没有从 API 获取数据时返回一个组件？

问题描述

not如果客户端输入确实存在的用户名，当 API 无法获取数据时，我想有选择地返回一个组件。

我从 API 获取数据如下：

    async function lichessProfile(username) {
        await fetch(`https://lichess.org/api/user/${username}`)
        .then((res)=>res.json())
        .then((json) => setData(json));
    }

并将其用作

let username =  JSON.stringify(data.username);

现在我在这里使用该功能：

function showDisplay() {
    if(username === undefined) {
        return(
            <Alert variant={'danger'}>
                <div>
                    <h2>User Does Not Exists !</h2>
                </div>
            </Alert>
        )
    }
    else {
        return(
            <div className="profileContainer">
               
                <Alert variant={'success'}>
                    <div>
                       <h2>User Exists !</h2>
                    </div>
                </Alert>
               
            </div>
        )

    }
}


return(
    <div>
        <div className='searchInput'>
            <input style={{fontFamily:'Unkempt, cursive', padding:'3%',fontSize:'150%',textAlign:'center'}} type="text" onChange={getData} placeholder="search..."/>
        </div>       
        <br/>
        <div className='searchButton'>
            <Button style={{fontSize:'80%',padding:'2%',backgroundColor:'grey'}} className="lichess-button" onClick={()=>lichessProfile(inputData)} >Get Profile</Button>
        </div>
        
        {showDisplay()};  
        {/* Here I am displaying the component */}
        
    </div>
  )
};

我现在得到了什么？一旦 API 没有获取，我就会得到unhandled error这样的“未处理的拒绝（SyntaxError）：JSON 输入的意外结束”。如果我使用 try-catch 则不会发生任何事情，但只会处理错误。

如何有选择地退回它们？

标签： javascriptreactjserror-handlingfetch

解决方案

let username = JSON.stringify(data.username)看起来不正确。你已经有了：

.then((res)=>res.json())
.then((json) => setData(json))

所以datafromsetData应该已经是JSON因为res.json().

除此之外，请确保您在用户名不存在时实际收到了您认为应该收到的数据。我认为如果response.json尝试将非 JSON 数据转换为 JSON，它将中断（在您的自定义捕获中不会捕获的承诺中）。

推荐阅读