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请求，并且它可以正常工作，所以我不知道现在发生了什么

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

要做的一件事是检查浏览器的网络开发人员标签，确保请求正确无误。

更新

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

＆＃13;

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

＆＃13;

Answer 2

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

<强> HTML

row["adate"] = $"S: {StartDateTime:yyyy-MM-dd HH:mm:ss}";

<强> JS

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

Answer 3

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

在黑暗中拍摄：

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

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

或者在构造函数中

this.handleFormSubmit.bind(this)

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

获取React.js无法正常工作

3 个答案:

更新