在 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

嘿试试这个小提琴它正在工作只需打开控制台它正在注销响应。 Fiddle Link

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)

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