Javascript componentDidUpdate（prevProps）中的无限api调用，尽管有条件将当前道具与前一道具进行比较

我的问题是在我的子组件文件中，父组件中的每个状态更新都通过使用传递给子组件的默认或更新的props值进行无限api调用来无限地重新呈现子组件。我有一个用户目录页面，在一个页面中包含多个组件

类用户扩展组件{
建造师（道具）{
超级（道具）；
此.state={
用户：“”，
用户列表：[]，
社会数据：[]，
联系人数据：[]，
视频数据：[]，
详细数据：[]
}
}
componentDidMount（）{
//获取此处用户列表的api调用
//将响应数据设置为this.state.listOfUsers
}
userHandler=async（事件）=>{
这是我的国家({
用户：event.target.value，
});
};
render（）{
返回(
//从api返回的用户列表
);
}
}

我为父组件

用户

调用了1个API，为每个子组件调用了4个API：

社交媒体

，

联系人

，

视频

，以及

详细信息

。

Users

api将在下拉列表中返回用户列表，然后将所选用户的值提供给其他四个api。i、 e.

https://localhost:3000/social_media?user=${this.state.user}

。因此，四个子组件的API取决于

用户

API。我目前在一个

组件didmount（）

中有父api调用，在其各自的子组件中有其他4个api调用，并使用道具将在父组件中选择的用户的值传递给子组件。每个api调用都在一个

componentDidUpdate（prevProps）

中。所有子组件均遵循此结构：

class社交媒体扩展组件{
建造师（道具）{
超级（道具）；
此.state={
用户：“”，
社会数据：[]，
}
}
组件将接收道具（道具）{
this.setState（{user:this.props.user}）
}
componentDidUpdate（prevProps）{
if（this.props.user！==prevProps.user）{
//在此处进行api调用
取回(`https://localhost:3000/social_media?user=${this.state.user}`）
.then（（response）=>response.json（））
.catch（（错误）=>console.error（“错误：”，error））
。然后（（数据）=>{
this.setState（{socialData:Array.from（data）}）；
}
}
render（）{
返回(
{this.socialData.length>0(
) 
:
（装载…）
);
}
}

如果

this.props.user

是一个对象，那么

this.props.user！==prevProps.user

将计算为true，因为它们不是同一个对象。如果您想比较它们是否具有相同的属性和值（即，它们大致相等），您可以使用npm包，如下所示：

import { shallowEqualObjects } from "shallow-equal";
//...
componentDidUpdate(prevProps){
 if (!shallowEqualObjects(prevProps.user, this.props.user)) {
   // make api call here
   fetch (`https://localhost:3000/social_media?user=${this.state.user}`)
    .then((response) => response.json())
    .catch((error) => console.error("Error: ", error))
    .then((data) => {
        this.setState({ socialData: Array.from(data) });
    }
 }

---

回答您问题的尝试失败

很难说这里到底发生了什么；根据

Users

组件中显示的

state

，

user

应该是一个字符串，比较起来应该很简单，但显然

如果（this.props.user！==prevProps.user）{

比较中出了问题

如果我们能看到

console.log（typeof this.props.user，this.props.user，typeof prevProps.user，typeof prevProps.user）

调用我在评论中建议的结果，我们可能会更好地了解这里发生了什么

超出问题范围的建议

鉴于您的状态的中等复杂性，您可能希望使用某种共享状态，如React、Redux或MobX。我倾向于使用上下文API，因为它内置于React中，需要相对较少的设置

---

（同样，我也更喜欢功能组件，而不是类和

componentdiddupdate

，因此如果不重写，我的建议可能不适用于您的代码库。）

prevProps设置在哪里？当该检查评估为

false

时，

this.props.user和
prevProps.user
是什么？如果我了解您观察到的行为，它们一定会有所不同。
componentDidUpdate（prevProps）中的条件
this.props.user！==prevProps.user
设置它？或者我必须以某种方式设置它。我只是按照示例：。@Aaron
this.props.user
是从父组件传递的值。我用该部分更新了原始帖子（很抱歉，它丢失了）。这可能是因为javascript比较对象的方式。
This.props.user
和
prevProps.user
的值相差不大，但它们不共享相同的引用，因此计算结果为false@Aaron这是一个类型比较问题。@WebbH使用
ShalloweQualobObjects
的示例解决了这个问题。谢谢大家：）