即使有很多问题的主题行相同，我也无法得到我的问题的答案。
问题
我有一个选择下拉菜单。点击它，我调用一个 Api 来获取一些关键值。我将这组键值输入字段视为一个组件。因此，每次我选择下拉菜单的 onChange 时，我都使用生命周期方法来处理 API 调用。此外，我记录这些输入键值并将它们的状态发送回父组件。
根据 ReactJS 生命周期方法：
我用
componentDidMount 初始渲染后第一次调用API。这有效。
componentDidUpdate 在选择下拉更改时为后续 API 调用调用 API。但问题就在这里。当我尝试更新输入字段的状态时，程序陷入无限循环，因此有无限的 API 调用。调试后我很确定问题出在 setState() 上，但我找不到在 componentDidUpdate 方法中处理状态的最佳方法。
此链接完全复制了我的问题，但我想要一个标准化的解决方案
希望这很清楚。我在这里先向您的帮助表示感谢！
这在文档中非常清楚地说明：
componentDidUpdate(prevProps) {
// Typical usage (don't forget to compare props):
if (this.props.userID !== prevProps.userID) {
this.fetchData(this.props.userID);
}
}
您可以在 componentDidUpdate () 中立即调用 setState()但请注意，它必须包含在如上例所示的条件中，否则会导致无限循环。
您可以setState()在componentDidUpdate(). 但是您必须为此使用条件。否则，它会无限循环。
例如，
componentDidUpdate(){
if(this.props.id !== this.state.id) {
this.setState({
id: this.props.id
});
}
}
发生这种情况是因为 setState 触发了对 componentDidUpdate 的调用。
调用 componentDidUpdate 时，setState 不会检查是否发生了状态更改。它只是一次又一次地调用 componentDidUpdate，这会导致 stackoverflow。
class Component extends React.Component{
constructor(props){
super(props);
this.state = {changeState: false}
}
componentDidMount(){
this.setState({changeState: true});
}
componentDidUpdate(){
this.setState({changeState: false});
}
}
这里首先在构造函数中将changeState设置为false，然后触发componentDidMount，将changeState的状态设置为true。此状态更改触发 componentDidUpdate，它再次将 changeState 的状态设置为 true。这会一次又一次地触发 componentDidUpdate。
您必须检查两个状态对象之间的真正区别。你可以在下面找到我的解决方案，我的状态对象有电影，它是一个对象数组。我编辑和电影，然后比较这两个数组。
async componentDidUpdate(prevProps, prevState) {
if (prevState.movies.filter (e => this.state.movies.includes(e))) {
const response = await axios.get("http://localhost:3002/movies");
this.setState({ movies: response.data })
}
}