javascript-在React.js中获取不起作用

我正在尝试在react.js中执行获取请求,但似乎没有获取任何东西.我觉得这是一个愚蠢的错误,我没有注意到.任何帮助,将不胜感激.

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％正常运行,所以我不知道现在发生了什么

解决方法:

我认为您的提取代码看起来还不错,控制台中是否会抛出任何错误？可能是您的处理程序未绑定到正确的上下文.如果未正确绑定该函数,则this.setState会导致错误,因为这不是正确的上下文.您可能希望将其绑定到构造函数中,或者甚至更好的方法是,使用如下的初始化程序：

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

标签：reactjs,web-deployment,css,html,javascript
来源： https://codeday.me/bug/20191025/1929063.html