React 更改父数组属性答案

【问题标题】：React change parent array propertiesReact 更改父数组属性
【发布时间】：2020-12-17 11:26:00
【问题描述】：

在父组件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 },
  ];

以及在子组件category-types-card.jsx中调用的函数selectItem

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>

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

提前致谢！

【问题讨论】：

您需要在props.categories 中拥有active 属性
我试过了，不行
@simpller 你能再贴一些代码吗？至少展示你如何渲染子组件并将其传递给道具。

标签： javascript arrays reactjs redux parent-child

【解决方案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)

  // ...
}

【讨论】：