多个下拉菜单，每个下拉菜单取决于在前一个中选择的值。反应

Question

我正在尝试开发一个由 3 个下拉菜单组成的过滤组件。第一个将从数据库中获取所有数据，第二个将根据第一个下拉列表中的选择获取数据，第三个将根据第二个下拉列表中选择的值获取数据。

我的问题如下：每当我在第一个或第二个下拉列表中选择一个值时，为下一个下拉列表获取的值都会落后一步。

下面是我的代码：我使用不带参数的初始 useEffect 来设置第一个下拉列表的值，然后我使用 2 个类似的 useEffects 从下拉列表中查找所选值。

useEffect(() => {

PostReqDevState.map((entry,index) => {

  if( projectNames.indexOf(entry["Requirement Submit-Project Name"]) === -1 && entry["Requirement Submit-Product Domain"] == personName.slice(-1)[0])
{
  console.log(entry["Requirement Submit-Product Domain"],entry["Requirement Submit-Project Name"])
  projectNames= [...projectNames,entry["Requirement Submit-Project Name"]]
}  
})

},[personName])

有什么建议吗？

Answer 1

找到了解决方案，我使用了一个临时数组来存储与过滤器对应的值，并使用数组的值设置了一个 state(projectNames)。