无法让组件DidUpdate()停止循环

Question

我正在尝试使用 Axios 从公共 API 获取数据，并显示我通过 React 应用程序获得的数据。但是我在我的组件DidUpdate((中找不到条件，使其仅在用户修改输入时呈现一次。有人会有一个想法吗？

这是我的代码：

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 请求包装在一个

if(prevState.input !== this.state.input) { --- }

条件，就像舒巴姆告诉我的那样。尽管如此，我不得不删除 setState(( 内部条件才能使其工作。

谢谢大家！