Javascript 获取React.js不工作

我试图在react.js中执行

获取

请求，但似乎什么都没有获取。我觉得这是一个愚蠢的错误，我没有注意到。任何帮助都将不胜感激

import React，{Component}来自'React'；
导入“/App.css”；
从“/TimeSearch.jsx”导入TimeSearch；
从“./CurrentTime.jsx”导入CurrentTime；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
名单：[]
};
}
handleFormSubmit（项目）{
var url='1〕https://api.aladhan.com/timingsByCity?city=“+项目+”&国家=美国&方法=2'；
获取（url）
。然后（响应=>{
返回response.json（）；
})
。然后（json=>{
这是我的国家({
Fajir:json.Fajir，
日出：json.Sunrise，
Dhuhr:json.Dhuhr
});
});
}
render（）{
返回(
欢迎来到祈祷时间！
在美国任何一个城市搜索时报
{
本文件为handleFormSubmit（项目）；
}}
/>
);
}
}
导出默认应用程序；
//时间搜索组件
从“React”导入React，{Component}；
类TimeSearch扩展组件{
render（）{
返回(

此.handleFormSubmit（e）}>
{' '}
搜索{'}
{' '}

);
}
handleFormSubmit（e）{
e、 预防默认值（）；
var item=this.refs.searchBox.value；
此.props.handleFormSubmit（项目）；
}
}
导出默认时间搜索；
//当前时间分量
从“React”导入React，{Component}；
类CurrentTime扩展组件{
render（）{
返回(
{this.props.Fajir}
);
}
}
导出默认当前时间我认为您的获取代码看起来不错，控制台中是否抛出任何错误？可能是您的处理程序未绑定到正确的上下文。如果未正确绑定函数，则
this.setState
将导致错误，因为
this
不是正确的上下文。您可能希望在构造函数中绑定它，或者更好地使用如下初始值设定项：

handleFormSubmit = (item) => {
  const url = `https://api.aladhan.com/timingsByCity?city=${item}&country=US&method=2`;

  fetch(url)
    .then((response) => {
     return response.json();
    })
    .then((json) => {
      this.setState({
        Fajir: json.Fajir,
        Sunrise: json.Sunrise,
        Dhuhr: json.Dhuhr
      });
    });
}

要做的一件事是检查浏览器的“网络开发人员”选项卡，确保请求正确通过

更新
看起来它现在正在工作，请参见下面的获取代码：


const item='Chicago'；
var url='1〕https://api.aladhan.com/timingsByCity?city=“+项目+”&国家=美国&方法=2'；
获取（url）
。然后（（响应）=>{
返回response.json（）；
})
。然后（（json）=>{
log（json）；
});您的fetch语句看起来正常

黑暗中的一枪：

在窗体上附加事件处理程序时，请确保绑定上下文：

<form onSubmit={this.handleFormSubmit.bind(this)}>

请向我们展示更多组件…
嘿，试试这把小提琴，它正在工作，打开控制台，它正在注销响应。

HTML

<div id="container"></div>



JS

class Hello extends React.Component {
handleFormSubmit = (item) => {
  const url = 'https://api.aladhan.com/timingsByCity?city='+item+'&country=US&method=2';
  fetch(url)
    .then((response) => {
        console.log(response);
     return response.json();
    })
    .then((json) => {
      this.setState({
        Fajir: json.Fajir,
        Sunrise: json.Sunrise,
        Dhuhr: json.Dhuhr
      });
    });
}
  render() {
    return <button onClick={() => this.handleFormSubmit(2)}>Click Me</button>;
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

类Hello扩展了React.Component{
handleFormSubmit=（项目）=>{
常量url=https://api.aladhan.com/timingsByCity?city=“+项目+”&国家=美国&方法=2'；
获取（url）
。然后（（响应）=>{
控制台日志（响应）；
返回response.json（）；
})
。然后（（json）=>{
这是我的国家({
Fajir:json.Fajir，
日出：json.Sunrise，
Dhuhr:json.Dhuhr
});
});
}
render（）{
返回这个.handleFormSubmit（2）}>单击我；
}
}
ReactDOM.render(
,
document.getElementById（'容器'）
);
嘿，我确实检查了网络选项卡，似乎提取请求不在其中，它没有显示任何内容。这意味着什么都没有发生fetched@ZubairAmjad现在似乎可以正常工作了，我想
https
可能可以跨域工作，但是
http
我没有尝试登录，出于某种原因，它不允许我登录我的浏览器，浏览器中没有任何东西被登录。当我创建一个react应用程序时，它在某个地方搞砸了，它成功了！嘿，菲利普，我已经更新了我的帖子！它将有组件！看起来还可以，从dev工具中进行提取。我注意到您需要以不同的方式处理json：json.data.timings包含您想要的属性。嘿，Phillipp，所以它应该类似于json.data.timings.Fajir，对吗？
class Hello extends React.Component {
handleFormSubmit = (item) => {
  const url = 'https://api.aladhan.com/timingsByCity?city='+item+'&country=US&method=2';
  fetch(url)
    .then((response) => {
        console.log(response);
     return response.json();
    })
    .then((json) => {
      this.setState({
        Fajir: json.Fajir,
        Sunrise: json.Sunrise,
        Dhuhr: json.Dhuhr
      });
    });
}
  render() {
    return <button onClick={() => this.handleFormSubmit(2)}>Click Me</button>;
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);