获取React.js无法正常工作

Question

我试图在react.js中做一个fetch请求，我似乎没有取任何东西。 我觉得这是一个愚蠢的错误，我没有注意到它。 任何帮助，将不胜感激。

 import React, {Component} from 'react'; import './App.css'; import TimeSearch from './TimeSearch.jsx'; import CurrentTime from './CurrentTime.jsx'; class App extends Component { constructor(props) { super(props); this.state = { list: [] }; } handleFormSubmit(item) { var 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 }); }); } render() { return ( <div className="App"> <h1>Welcome to Prayer Times!</h1> <h6>Search for times in any city in the United States</h6> <TimeSearch handleFormSubmit={item => { this.handleFormSubmit(item); }} /> <CurrentTime Fajir={this.state.Fajir} /> </div> ); } } export default App; // Time Search Component import React, {Component} from 'react'; class TimeSearch extends Component { render() { return ( <ul> <form onSubmit={e => this.handleFormSubmit(e)}> <input type="text" id="lookUp" placeholder="Search by City" ref="seachBox" /> <button type="submit" id="searchButtons"> {' '} Search{' '} </button> </form>{' '} </ul> ); } handleFormSubmit(e) { e.preventDefault(); var item = this.refs.searchBox.value; this.props.handleFormSubmit(item); } } export default TimeSearch; // Current Time Component import React, {Component} from 'react'; class CurrentTime extends Component { render() { return ( <div id="time"> <h1 id="fajir"> {this.props.Fajir} </h1> </div> ); } } export default CurrentTime; 

更新 https://i.stack.imgur.com/YJx9T.png

当我记录这个让我感到困惑并且我尝试使用Postman Windows应用程序发出API请求时，没有任何东西出现，并且它可以100％正常工作，所以我不知道现在发生了什么

Answer 1

我认为你的fetch代码看起来不错，是否在控制台中抛出任何错误？ 它可能是您的处理程序没有绑定到正确的上下文。 如果未正确绑定函数，则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 = 'https://api.aladhan.com/timingsByCity?city=' + item + '&country=US&method=2'; fetch(url) .then((response) => { return response.json(); }) .then((json) => { console.log(json); }); 

Answer 2

嘿试试这个小提琴它正在工作只是打开控制台它正在退出响应。 小提琴链接

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')
);

Answer 3

你的fetch语句看起来没问题。

盲目猜测：

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

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

或者在构造函数中

this.handleFormSubmit.bind(this)

向我们展示更多组件请...