Javascript 更改父数组属性

在父组件

managecategories.jsx

中，我声明了一个数组

categoritypes

const categoryTypes = [
    { name: "category", values: props.categories, active: true },
    { name: "type", values: props.types },
    { name: "finish", values: props.finishes },
    { name: "profile", values: props.profiles },
    { name: "thickness", values: props.thicknesses },
    { name: "ral", values: props.rals },
  ];

以及在子组件

类别类型卡中调用的函数
selectItem
。jsx

const selectItem = (item, category) => {
    switch (category.name) {
      case "category":
        setSelectedCategoryItem(item);
        break;
      case "type":
        setSelectedTypeItem(item);
        break;
      case "finish":
        setSelectedFinishItem(item);
        break;
      case "profile":
        setSelectedProfileItem(item);
        break;
      case "thickness":
        setSelectedThicknessItem(item);
        break;
      case "ral":
        setSelectedRalItem(item);
    }
  };

在子组件中，我需要为具有

active:true

Category的类别显示一些内容，当它具有selectedItem时，该类别将变为active

我试图使它像

categoryTypes[1]={…categoryTypes[1]，active:true}一样处于活动状态

在上述开关中，但在子组件中，特定类别的活动属性不会更改

调用子组件：

<Row className="mb-4">
        {categoryTypes.map((category, index) => {
          return (
            <Colxx
              xxs="12"
              xs="6"
              sm="6"
              md="6"
              lg="4"
              xl="4"
              xxl="4"
              key={index}
            >
              <CategoryTypes
                category={category}
                employee={employee}
                selectItem={selectItem}
                selectedCategoryItem={selectedCategoryItem}
                selectedTypeItem={selectedTypeItem}
                selectedFinishItem={selectedFinishItem}
                selectedProfileItem={selectedProfileItem}
                selectedThicknessItem={selectedThicknessItem}
                selectedRalItem={selectedRalItem}
              />
            </Colxx>
          );
        })}
      </Row>

{categoryTypes.map（（类别，索引）=>{
返回(
);
})}

我应该如何正确处理这种情况

---

提前谢谢

将回调传递给子组件怎么样？像这样：

const ManageCategories=（道具）=>{
常量[categoryTypes，setCategoryTypes]=useState([
{name:“category”，值：props.categories，active:true}，
{name:“type”，值：props.types}，
{name:“finish”，值：props.finishs}，
{name:“profile”，值：props.profiles}，
{名称：“厚度”，值：props.thickness}，
{name:“ral”，值：props.rals}，
])
常量setCategoryTypeActive=（categoryName，active）=>{
setCategoryTypes（（categoryTypes）=>
categoryTypes.map（（categoryType）=>
categoryType.name==categoryName
？{…类别类型，活动}
：类别类型
)
)
}
返回(
{categoryTypes.map（（类别，索引）=>(
))}
)
}

然后，在子组件中的某个位置，例如：

const CategoryTypesCard=（道具）=>{
props.setCategoryTypeActive（“完成”，真）
// ...
}

您需要在

props.categories

中设置

active

属性，我现在试过了，但是没有work@simpller你能再发一些代码吗？至少演示如何渲染子组件并将道具传递给它。@EyalC完成，我编辑了问题。它成功了！非常感谢你！不客气！我很高兴它成功了。