反应改变父数组属性

Question

在父组件中 manage-categories.jsx 我声明了一个数组 categoryTypes

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 },
  ];

和子组件中调用的函数selectItemcategory-types-card.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 的类别显示一些内容类别在具有 selectedItem 时变为活动状态。

我试图像上面的开关中的 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>

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

提前致谢！

Answer 1

给子组件传递一个回调如何？像这样：

const ManageCategories = (props) => {
  const [categoryTypes, setCategoryTypes] = useState([
    { 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 },
  ])

  const setCategoryTypeActive = (categoryName, active) => {
    setCategoryTypes((categoryTypes) =>
      categoryTypes.map((categoryType) =>
        categoryType.name === categoryName
          ? { ...categoryType, active }
          : categoryType
      )
    )
  }

  return (
    <Row className="mb-4">
      {categoryTypes.map((category, index) => (
        <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}
            setCategoryTypeActive={setCategoryTypeActive}
          />
        </Colxx>
      ))}
    </Row>
  )
}

然后，在你的子组件的某处，例如：

const CategoryTypesCard = (props) => {
  props.setCategoryTypeActive("finish", true)

  // ...
}

反应改变父数组属性

React change parent array properties

javascript

arrays

parent-child

reactjs

redux