在React.JS中处理API调用的输入更改

debugcn 发表于 Dev

阿齐兹·加西莫夫（Aziz Gasimov）

我是React和JavaScript的新手，在这里我想根据相应的按钮获取国家/地区的结果（之后相应地更新API URL）。到目前为止，我设法使按钮起作用，但是肯定这不是正确的方法，因为在控制台中，我看到该组件被永远调用。所以我想知道处理这种情况的正确方法是什么

  constructor(props) {
    super(props);
    this.state = {
      res: "",
      confirmedCases: 0,
      targetCountry: "",
      deathNumber: 0,
      targetProvince: "",
      userInput: "Azerbaijan"
    };
  }

  componentDidUpdate(prevProps,prevState) {
    if (this.state.userInput !== prevState.userID) {

    fetch("https://covid-19-coronavirus-statistics.p.rapidapi.com/v1/stats?country="+this.state.userInput, {
      "method": "GET",
      "headers": {
        "x-rapidapi-key": "2f66132eeemsh16e2dd05b2ecd59p1ab765jsnc1f549cafc64",
        "x-rapidapi-host": "covid-19-coronavirus-statistics.p.rapidapi.com"
      }
    })
    .then(response => response.json()).then(data => {
      this.setState({
        res: data.data.lastChecked,
        confirmedCases: data.data.covid19Stats[0].confirmed,
        targetCountry: data.data.covid19Stats[0].country,
        deathNumber: data.data.covid19Stats[0].deaths,
        targetProvince: data.data.covid19Stats[0].province
      })
      console.log(data.data.covid19Stats[0].confirmed)
    })
    .catch(err => {
      console.error(err);
    });
  }
}

  handleChange = (target) =>{
    this.setState({
      userInput: target
    });
  }
  render(){
    return (
      <div className="App">
       <button onClick={(target) => this.handleChange("Azerbaijan", target)}>Azerbaijan</button>
       <button onClick={(target) => this.handleChange("Russia", target)}>Russia</button>
       <button onClick={(target) => this.handleChange("Turkey", target)}>Turkey</button>
      Last Updated:  {this.state.res}
        <br></br>
      Confirmed Cases:  {this.state.confirmedCases}
        <br></br>
      Country:  {this.state.targetCountry}
        <br></br>
      Number of Death:  {this.state.deathNumber}
        <br></br>
      Province:  {this.state.targetProvince}
      </div>
    );
  }
}

b3hr4d

只需删除componentDidUpdate并添加提取API即可handleChange运行。

使用componentDidMount用于获取默认的数据。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      res: "",
      confirmedCases: 0,
      targetCountry: "",
      deathNumber: 0,
      targetProvince: "",
    };
  }
  componentDidMount() {
    this.handleFetch("Azerbaijan");
  }

  handleChange = (target) => {
    this.handleFetch(target);
  };

  handleFetch = (target) => {
    fetch(
      "https://covid-19-coronavirus-statistics.p.rapidapi.com/v1/stats?country=" +
        target,
      {
        method: "GET",
        headers: {
          "x-rapidapi-key":
            "2f66132eeemsh16e2dd05b2ecd59p1ab765jsnc1f549cafc64",
          "x-rapidapi-host": "covid-19-coronavirus-statistics.p.rapidapi.com",
        },
      }
    )
      .then((response) => response.json())
      .then((data) => {
        this.setState({
          res: data.data.lastChecked,
          confirmedCases: data.data.covid19Stats[0].confirmed,
          targetCountry: data.data.covid19Stats[0].country,
          deathNumber: data.data.covid19Stats[0].deaths,
          targetProvince: data.data.covid19Stats[0].province,
        });
      })
      .catch((err) => {
        console.error(err);
      });
  };
  render() {
    return (
      <div className="App">
        <button onClick={() => this.handleChange("Azerbaijan")}>
          Azerbaijan
        </button>
        <button onClick={() => this.handleChange("Russia")}>
          Russia
        </button>
        <button onClick={() => this.handleChange("Turkey")}>
          Turkey
        </button>
        <hr/>
        Last Updated: {this.state.res}
        <br/>
        Confirmed Cases: {this.state.confirmedCases}
        <br/>
        Country: {this.state.targetCountry}
        <br/>
        Number of Death: {this.state.deathNumber}
        <br/>
        Province: {this.state.targetProvince}
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById("react"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。