Question

到目前为止，我在componentDidMount（）中调用api并将其设置为select选项。还可以从用户输入调用另一个条件api。但问题是它是在不停地呼叫api。

**getRates(){
    const base = this.handlePrint(this.state.value);
    fetch(`https://exchangeratesapi.io/api/latest?base=${base}`)
        .then(data => data.json())
        .then(data =>{
           this.setState({
               rate: data.rates,
           })
            console.log(data.rates)
        })
        .catch(err => console.log(err))
}**

我的控制台屏幕截图：

console

我只需要根据用户输入进行一次api调用。

完整代码：https://codeshare.io/5MwXzq

我认为国家存在问题，但我是反应中的新手，无法理解如何解决这个问题。任何人都可以帮忙。

Answer 1

这不是因为componentDidMount()

中的任何事情而发生的

根据您在codeshare.io上分享的代码，您在getRates()方法中调用render()函数。此外，您使用setState方法中的getRates设置状态。这会导致重新渲染，再次调用render()，因此您将获得无限循环的调用。

从您的getRates()方法移除对render的号召，这样就可以了。

编辑：

由于您的代码中存在较小的更改但是为了使其正常工作，我已经修改了您的课程并将其发布到此处：

class Main extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currencies: [],
      value: "?",
      base: "?",
      input: "?",
      rate: 0
    };
    this.getRates = this.getRates.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.handlePrint = this.handlePrint.bind(this);
  }

  componentDidMount() {
    fetch("https://exchangeratesapi.io/api/latest?symbols=USD,GBP,AUD,JPY")
      .then(data => data.json())
      .then(data => {
        const currencies = [];
        currencies.push(
          data.base,
          ...Object.entries(data.rates).map(rates => rates[0])
        );

        this.setState({
          currencies
        });
      })
      .catch(err => console.log(err));
  }

  getRates() {
    const base = this.handlePrint();
   console.log(this.state); fetch(`https://exchangeratesapi.io/api/latest?base=${base}`)
      .then(data => data.json())
      .then(data => {
        this.setState({
          rate: data.rates
        });
        console.log(data.rates);
      })
      .catch(err => console.log(err));
  }

  //Dropdown
  DropDown = function(list) {
    return <option value={list}>{list}</option>;
  };

  handleChange(e) {
    this.setState({ value: e.target.value });
  }

  handlePrint() {
    console.log(this.state)
    if (this.state.value) {
      return this.state.value;
    }
  };
  render() {
    const { currencies } = this.state;
   // const input = this.getRates();

    return (
      <div>
        <span>SELECT your Base: </span>
        <select autoFocus onChange={this.handleChange}>
          <option inputcurrency={currencies} selected data-default>
            SELECT BASE
          </option>
          {currencies.map(this.DropDown)}
        </select>
        <button onClick={this.getRates}>GET RAtes</button>
        <p>selected base:{this.handlePrint()} </p>
      </div>
    );
  }
}

变化是： 1.构造函数中的绑定getRates()方法 2.在渲染开始时删除了对getRates()的调用 3.删除传递给handlePrint的不必要项目 4.将按钮onClick更改为指向getRates

从其他函数状态REACTJS获取api调用的值

1 个答案: