Javascript JSON：在文本元素中显示第三级内容（ReactJS/Native）

因此，我尝试使用一个文本元素来显示JSON中的某个子元素（使用

fetch

获取）。我正在尝试将fetch的响应设置为

this.state.json

（在构造函数中声明）。然后我将

Text

元素与

this.state.json.current.name

（这是Airtime API中的一个有效子元素）一起使用，但在计算

this.state.json.current.name

时，我得到一个错误，即

undefined不是对象。我尝试过使函数同步和异步（我想可能在文本试图显示时没有加载JSON），但没有任何效果


fetchJSON=async（）=>{
取（'http://IPADDRESS/api/live-info', {
方法：“get”，
数据类型：“jsonp”，
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”
}
})。然后（（响应）=>{
返回response.json（）
}).然后（（响应数据）=>{
this.setState（{json:responseData}）
this.setState（{isLoadedJSON:true}）
返回响应数据；
})
.catch（函数（err）{
控制台日志（err）；
})
}
问题可能与渲染发生时未收到响应且stat上的json对象尚未设置有关

您可以设置第二个状态变量，名为like
name
，并使用它来显示文本

示例

  fetchJSON = async () => {
    fetch('http://IPADDRESS/api/live-info', {
      method: 'get',
      dataType: 'jsonp',
      headers: {
         'Accept': 'application/json',
         'Content-Type': 'application/json'
      }
  }).then((response) => {
       return response.json()
  }).then((responseData) => {
        this.setState({
          json: responseData,
          name: responseData.current.name,
          isLoadedJSON: true
        });
        return responseData;
    })
  .catch(function(err) {
      console.log(err);
  })
  }

  //...
  <Text>{this.state.name}</Text>

fetchJSON=async（）=>{
取（'http://IPADDRESS/api/live-info', {
方法：“get”，
数据类型：“jsonp”，
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”
}
})。然后（（响应）=>{
返回response.json（）
}).然后（（响应数据）=>{
这是我的国家({
json:responseData，
名称：responseData.current.name，
isLoadedJSON:true
});
返回响应数据；
})
.catch（函数（err）{
控制台日志（err）；
})
}
//...
{this.state.name}
问题可能与渲染发生时未收到响应且stat上的json对象尚未设置有关

您可以设置第二个状态变量，名为like
name
，并使用它来显示文本

示例

  fetchJSON = async () => {
    fetch('http://IPADDRESS/api/live-info', {
      method: 'get',
      dataType: 'jsonp',
      headers: {
         'Accept': 'application/json',
         'Content-Type': 'application/json'
      }
  }).then((response) => {
       return response.json()
  }).then((responseData) => {
        this.setState({
          json: responseData,
          name: responseData.current.name,
          isLoadedJSON: true
        });
        return responseData;
    })
  .catch(function(err) {
      console.log(err);
  })
  }

  //...
  <Text>{this.state.name}</Text>

fetchJSON=async（）=>{
取（'http://IPADDRESS/api/live-info', {
方法：“get”，
数据类型：“jsonp”，
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”
}
})。然后（（响应）=>{
返回response.json（）
}).然后（（响应数据）=>{
这是我的国家({
json:responseData，
名称：responseData.current.name，
isLoadedJSON:true
});
返回响应数据；
})
.catch（函数（err）{
控制台日志（err）；
})
}
//...
{this.state.name}
这里到底发生了什么？呈现在异步请求响应之前触发多次。您还可以通过使用
this.state.json&&
条件呈现检查
json
是否存在于
状态中，来检查状态是否已使用
json
设置：


类测试扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
}
}
组件willmount（）{
this.fetchJSON（）
}
fetchJSON（）{
取（'https://api.myjson.com/bins/q6edh', {
方法：“get”，
数据类型：“jsonp”，
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”
}
})。然后（（响应）=>{
返回response.json（）
}).然后（（响应数据）=>{
这是我的国家({
json:responseData
})
这是我的国家({
isLoadedJSON:true
})
//console.log（this.state）；
返回响应数据；
})
.catch（函数（err）{
控制台日志（err）；
})
}
render（）{
报税表（
{this.state.json&&名称为：{this.state.json.current.name}
}
)
}
}
ReactDOM.render（，
document.getElementById（'root'））
);
这里到底发生了什么？呈现在异步请求响应之前触发多次。您还可以通过使用
this.state.json&&
条件呈现检查
json
是否存在于
状态中，来检查状态是否已使用
json
设置：


类测试扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
}
}
组件willmount（）{
this.fetchJSON（）
}
fetchJSON（）{
取（'https://api.myjson.com/bins/q6edh', {
方法：“get”，
数据类型：“jsonp”，
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”
}
})。然后（（响应）=>{
返回response.json（）
}).然后（（响应数据）=>{
这是我的国家({
json:responseData
})
这是我的国家({
isLoadedJSON:true
})
//console.log（this.state）；
返回响应数据；
})
.catch（函数（err）{
控制台日志（err）；
})
}
render（）{
报税表（
{this.state.json&&名称为：{this.state.json.current.name}
}
)
}
}
ReactDOM.render（，
document.getElementById（'root'））
);

您能发布
响应数据吗？我建议您在
componentDidMount
内部调用
fetchJSON
，而不是
componentWillMount
。您可以阅读这篇为@Ionut编辑的文章，了解更多信息。您可以发布
响应数据吗？我建议您在
componentDidMount
内部调用
fetchJSON
，而不是
componentWillMount
。你可以在这个漂亮的ar上读到更多关于它的信息