希望在api返回的数据中使用字符串函数

wvt8vs2t  于 2021-09-23  发布在  Java
关注(0)|答案(2)|浏览(459)

我想在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;

我试图分别显示时间和日期。我怎样才能提高????

q0qdq0h2

q0qdq0h21#

因为初始状态 data[] . 在api调用成功并返回值之前, mystrundefined . 因此,您可以使用条件(三元)运算符进行如下更新:

<div className="timezone">       
    Date: {mystr?.slice(1,10)} <br/>
    Time: {mystr?.slice(12,13)} <br/>
    Timezone: {data.timezone}
</div>
ktca8awb

ktca8awb2#

在代码中,我只看到在运行代码时设置变量“mystr”一次

let mystr = JSON.stringify(data.datetime);

我假设当时data.datetime是未定义的,json.stringify(未定义)也返回未定义的。我假设您计划用时区获取的结果填充数据。你已经打过电话了

setData(json);

我在您的示例中没有看到该函数的代码,但您可以使用它将数据变量设置为json结果,如

data = json;

您可能需要将数据声明为let变量而不是常量(const)来重新分配它

相关问题