Question

我正在尝试使用Axios从公共API获取数据，并显示我通过React应用程序获得的内容。但是当我在componentDidUpdate（）中找不到条件时，只能在用户修改输入时使其渲染一次。任何人都有想法？

这是我的代码：

import React, { Component } from 'react';
import axios from "axios";
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      input: "",
      output: []
    }
  }

  componentDidUpdate() {
    axios.get(`https://geo.api.gouv.fr/communes?nom=${this.state.input}`)
      .then(response => {
        this.setState((prevState) => {
          if (prevState.input !== this.state.input) {
            return { output: response.data };
          }
        });
      })
      .catch(function (error) {
        console.log(error);
      })
  }

  handleInput = (event, input) => {
    this.setState({input: event.target.value});
  }

  render() {
    return (
      <React.Fragment>
        <label>Recherche : <input type="text" onChange={this.handleInput} /></label>
        <div>
          {this.state.output.map((value, index) => <p key={index}>{value.nom}</p>)}
        </div>
      </React.Fragment>
    );
  }
}

export default App;

感谢您的帮助。

Answer 1

假设您需要在每次状态更改时执行操作，您需要在action中触发componentDidUpdate之前检查状态是否已更新，否则只要您的组件更新，就会进行API调用。

如果您只想调用一次API，请在componentDidMount

中调用它

componentDidUpdate(prevProps, prevState) {

    if(prevState.input !== this.state.input) {
        axios.get(`https://geo.api.gouv.fr/communes?nom=${this.state.input}`)
          .then(response => {
            this.setState({ output: response.data });
          })
          .catch(function (error) {
            console.log(error);
          })
    }
}

Answer 2

您正在循环使用代码：更新组件后，将调用componentDidUpdate;在这个函数中，你调用setState来重新渲染组件。这将再次触发componentDidUpdate等等...... 我认为您应该将API调用从componentDidUpdate移至componentDidMount。

Answer 3

如果您需要调用一次API 您可以使用componentWillMount，一旦状态发生变化，数据到达时您的组件将重新呈现

只有当你想在组件重新渲染时使用你的API时，才能使用componentDidUpdate，在这种情况下，请确保你没有改变状态以避免无限循环。

Answer 4

您想要获取数据的唯一时刻是您的输入已更改。为什么不使用该方法来触发获取？状态用于跟踪输入和检索的内容，但您不应依赖状态更改来触发依赖于用户更改的功能。

通过我的评论，将您的示例转换为我认为是一个很好的示例：https://codesandbox.io/s/oxoxoym85y

Answer 5

假设您每次状态改变都需要采取行动......

实际上，这就是我想要做的，而我找到的解决方案是将Axios请求包装在

中

4. git push sxm

条件，正如Shubham告诉我做的那样。然而，我不得不删除setState（）内部条件以使其工作。

感谢大家！

无法获得componentDidUpdate（）停止循环

5 个答案: