我想在api返回的数据中使用slice(x,y),length()等字符串函数。
我已使用 JSON.stringfy(obj)
变为变量 mystr
并使用字符串函数。但是每当页面重新加载/呈现时,控制台就会显示 TypeError: Cannot read property 'slice' of undefined
i、 e.无法识别字符串方法。
代码如下
import React, {useState,useEffect} from 'react';
const TimeZoneComponent = () => {
const [data, setData] = useState([]);
const timeZone = () => {
fetch("http://worldtimeapi.org/api/timezone/Asia/Kolkata")
.then((response)=>response.json())
.then((json)=>{
console.log(json);
setData(json);
})
}
useEffect(()=> {
timeZone();
},[])
let mystr = JSON.stringify(data.datetime);
return(
<div className="timezone">
Date: {mystr.slice(1,10)} <br/>
Time: {mystr.slice(12,13)} <br/>
Timezone: {data.timezone}
</div>
);
}
export default TimeZoneComponent;
我试图分别显示时间和日期。我怎样才能提高????
2条答案
按热度按时间q0qdq0h21#
因为初始状态
data
是[]
. 在api调用成功并返回值之前,mystr
是undefined
. 因此,您可以使用条件(三元)运算符进行如下更新:ktca8awb2#
在代码中,我只看到在运行代码时设置变量“mystr”一次
我假设当时data.datetime是未定义的,json.stringify(未定义)也返回未定义的。我假设您计划用时区获取的结果填充数据。你已经打过电话了
我在您的示例中没有看到该函数的代码,但您可以使用它将数据变量设置为json结果,如
您可能需要将数据声明为let变量而不是常量(const)来重新分配它