Javascript 状态更改不触发componentDidMount（）

我有一个组件，它从API调用中获取所有数据，并将其存储到一个状态。它将该状态传递给呈现该数据的组件。我想向该数据添加过滤器：根据过滤器的状态，API的数据必须根据进行过滤并传递给呈现的组件，但在更改过滤器状态时，状态不会更新

代码简化

类排行榜扩展组件{
建造师（道具）{
超级（道具）；
此.state={
卡片：[]，
已筛选：[]，
过滤器入选：“运动，品牌”，
}
}
componentDidMount（）{
this.props.firebase.cards（）.on（'value'，snapshot=>{
const cardsObject=snapshot.val（）
const cardList=Object.keys（cardsObject.map）（key=>({
…cardsObject[键]，
uid：钥匙，
}));
const filtered=cardList.filter（当前=>{
返回当前值。参数===“运动”
})
这是我的国家({
卡片：卡片列表，
过滤：过滤，
})
})
}
render（）{
const handleFilterChange=事件=>{
this.setState（{filterSelected:event.target.value}）
};
返回(
排行榜
运动
烙印
)
}
}

这是另一个应该呈现过滤内容的组件

导出默认函数表（{list}）{
返回(
H1
氢
H3
{list.map（当前=>(
{player.name}
{current.parameter}
{current.location}
))}
);
}

结果是在第一次加载时，根据初始状态对结果进行过滤，因此，例如，卡片状态中的项目总数为41，过滤状态为26，因此首先进行过滤。但是，当我修改filterSelected状态的状态时，组件或筛选状态不会自动更新。我希望的结果是，每次filterSelected state更新其值时，都会更新filtered state

---

我的方法有什么问题？有更好的方法来实现我的目标吗？

ComponentDidMount

只触发一次。这就是它的工作原理。它仅在初始渲染后立即触发一次。您还应该使用

componentdiddupdate

。我鼓励您更好地将该类组件转换为功能组件，并使用

useState

和

useffect

挂钩。

您的firebase处理程序正在启动吗？不相关，但我看不出有任何理由在渲染方法中创建

handleFilterChange

。使用componentDidUpdate进行后续重新渲染