Блог

Главная - Вопросы по программированию - Реагирует на изменение свойств родительского массива

Реагирует на изменение свойств родительского массива

#javascript #arrays #reactjs #redux #parent-child

#javascript #массивы #reactjs #redux #родитель-потомок

Вопрос:

В родительском компоненте 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 },
  ];

и функция selectItem , которая вызывается в дочернем компоненте category-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>

Как мне правильно справиться с этой ситуацией?

Заранее спасибо!

Комментарии:

1. Вы должны иметь active свойство внутри props.categories

2. Я попробовал сейчас, но это не сработало

3. @simpller Не могли бы вы, пожалуйста, опубликовать еще немного кода? По крайней мере, покажите, как вы визуализируете дочерний компонент и передаете ему реквизит.

Ответ №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)

  // ...
}