获取 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

我认为您的提取代码看起来不错，控制台中是否抛出任何错误？可能是您的处理程序未绑定到正确的上下文。如果您没有正确绑定函数，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

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

暗中拍摄：

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

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

或者在构造函数中

this.handleFormSubmit.bind(this)

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

Answer 3

嘿试试这个 fiddle 它正在工作，只需打开它正在注销响应的控制台。 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')
);

获取 React.js 无效

Fetch in React.js not working

html

javascript

css

web-deployment

reactjs

更新