Javascript 在创建新实例之前对值进行反应过滤器

我有一个反应组件，如下所示：

导出默认函数renderditorprops{ const{annotation，onChange，onSubmit，categories，usedCategories}=props； 常量[selectedValue，setSelectedValue]=React.UseStateCegories[0]。categoryName const displayedCategories=categories.FilterCategories=>！usedCategories.IncludeCategories.categoryName //这应该是固定的，这样它也可以正确设置类别 React.useffect=>{ document.addEventListenerkeydown，e=>handleKeyPresse，设置selectedValue，onChange，categories，annotation，onSubmit，selectedValue }, [] //这用于过滤类别，以便仅显示可用类别 回来 编辑示例

提交 } 我想要实现的是改变这一部分：

常量[selectedValue，setSelectedValue]=React.UseStateCegories[0]。categoryName const displayedCategories=categories.FilterCategority=>！usedCategories.IncludeCategories.categoryName …因此，displayedCategories是上述状态下的默认值，而不是类似的值：

const [selectedValue, setSelectedValue] = React.useState(displayedCategories[0].categoryName)
const displayedCategories = categories.filt ...

我已经尝试使用useEffect钩子来过滤该值，但我也不想支持drill。关于如何实现此功能，有什么好的建议吗？

在useState语句之前计算displayedCategories不会违反钩子的规则，因此这很好：

const {annotation, onChange, onSubmit, categories, usedCategories} = props;

const displayedCategories = categories
  .filter(category => !usedCategories.includes(category.categoryName))

const [selectedValue, setSelectedValue] = React.useState(displayedCategories[0].categoryName)

然后，如果您还想在类别或usedCategories道具更改时更改selectedValue，可以添加如下内容：

React.useEffect(() => {
  setSelectedValue(displayedCategories[0].categoryName);
}, [categories, usedCategories]);

---

也许是我早上的大脑，但我还不清楚你的意思。当displayedCategories更改时，您是在询问如何更改selectedValue，还是在usedCategories属性更改时更准确地更改selectedValue？还是您只是想用displayedCategories初始化selectedValue？在使用状态之前执行过滤逻辑是完全合法的。完美！非常感谢，这正是我想要的