Javascript 如何使用TypeScript处理来自API的响应

使用Axios with TypeScript处理HTTP请求的响应时遇到问题。我不明白我看到的行为。这会返回一次位置，然后当我刷新页面时，它不再工作，它会显示

TypeError:cannotread属性'location'of undefined

我感觉我不明白这一切是如何工作的

我要做的就是访问API返回的所有数据。如果有人有使用TypeScript的简单例子，我会非常感激。我可以在普通JavaScript中完成这项工作，但在将其转换为TypeScript时遇到了困难。我的问题与此类似

constwebmap:FC=（）=>{
常量url=https://data.police.uk/api/crimes-street/all-crime?lat=52.629729&lng=-1.131592和日期=2019-10'；
界面用户{
身份证？：有；
位置？：任何；
}
const[users，setUserList]=useState（[]）；
useffect（（）=>{
获取（url）
。然后（响应=>{
//console.log（response.data）；
setUserList（response.data）；
});
}, [])
console.log（用户[0]。位置）

在调用

setUserList

填充数组之前，什么是

users[0]

？它是

未定义的
。在尝试访问它的字段之前，也许您应该检查
users[0]
是否为非空

如果是我，我不会为
useState
调用提供默认值：

const [users, setUserList] = useState<User[]>();

…或…在JSX/TSX中

{users && users.map(u => (<div>{u.location}</div>)}

{users&&users.map（u=>（{u.location}）}

用户的类型将从
用户[]|未定义
到
用户[]

您仍然需要确保在此之后显式访问的索引（例如，
用户[0]
）在您尝试引用其属性之前实际存在。
这是由于您尝试访问数据，即使数据未设置为状态

如果用户
不为空
和
truthy
则记录数据

if(users && users.length > 0)){
    console.log(users.location)
}

您的测试将始终通过，错误将持续存在。
用户
没有被定义为数组的地方。请参阅上面传递给
设置状态
的默认值。是的，我只是尝试添加if语句，但仍然会出现相同的错误。正如@spender指出的那样，首先您有一个空数组。因此我更新了answer检查数组是否为空，然后仅检查
console.log（）
值。请记住，所有JavaScript都是有效的TypeScript。如果您有JavaScript的工作解决方案，也可以将其用作TypeScript的工作解决方案。因此，这些情况下的问题通常是一些打字/复制粘贴错误。@AlexWalker我在JavaScript中使用的解决方案没有使用Axios，而是使用了swr。我遇到了一个这个常量fetcher=（…args）=>fetch（…args）有问题。然后（response=>response.json（））；TypeScript抱怨预期的1-2个参数，但得到了0个或更多。TS2556我不知道如何修复该错误，所以我尝试了另一个解决方案。
{users && users.map(u => (<div>{u.location}</div>)}

if(users && users.length > 0)){
    console.log(users.location)
}