Обновление объекта состояния не выполняет рендеринг динамически созданного компонента

Question

У меня есть компонент с тремя вкладками, в которых у меня есть уникальные фильтры для каждой вкладки.В настоящее время я пишу компонент «Фильтр», который будет принимать тип вкладки как опору и отображать правильные кнопки фильтра.После нажатия на каждую кнопку я хочу, чтобы стиль кнопок менялся, чтобы пользователь знал, что он установил данный фильтр.

Я сохраняю состояние для каждой из кнопок в объекте, определенном ниже:

const [filterState, setFilterState] = useState({
    deployment: {
      running: false,
      success: false,
      warnings: false,
      failures: false,
    },
    health: {
      warnings: false,
      critical: false,
      errors: false,
    },
    task: {
      waiting: false,
      running: false,
      retrying: false,
      success: false,
      failures: false,
    }
  })

У меня есть вспомогательная функция, используемая для установки состояния filterType, определенного следующим образом:

  const setFilter = tab => {
    let updateFilter = filterState
    updateFilter[umsTab][tab] = !filterState[umsTab][tab]
    setFilterState(updateFilter)
    console.log(filterState[umsTab])
  }

Я делаю это так, чтобы полностью обновлять состояние объекта при каждом вызове этой функции.Функция для обновления состояния вызывается методом onClick внутри компонента Button.Эти компоненты кнопок создаются динамически, как я уже упоминал выше, например:

const createButtons = () => {
    let FilterButtons = []

    FilterTypes[umsTab].forEach(tab => {
      FilterButtons.push(
        <Button
          kind={filterState[umsTab][tab] === false ? "primary" : "secondary"}
          key={tab}
          onClick={() => setFilter(tab)}
        >
          {tab}
        </Button>
      )
    })

    return FilterButtons
  }

Нажатие кнопки и запись в журнал переменной состояния filterType в консоли показывает, что состояние обновляется, однако компонент не перерисовывается.Может ли это ввести код здесь из-за того, что кнопки создаются динамически?Я надеюсь, что, проверив объект состояния, я могу отображать кнопки со стилизацией или без нее при каждом нажатии.

Полный код:

const FilterTypes = {
  deployment: ["running", "success", "warnings", "failures"],
  health: ["warnings", "critical", "errors"],
  task: ["waiting", "running", "retrying", "success", "failures"],
}

const Filters = ({ umsTab }: Props) => {
  const { message } = useMessages()
  const [filterState, setFilterState] = useState({
    deployment: {
      running: false,
      success: false,
      warnings: false,
      failures: false,
    },
    health: {
      warnings: false,
      critical: false,
      errors: false,
    },
    task: {
      waiting: false,
      running: false,
      retrying: false,
      success: false,
      failures: false,
    },
  })

  const setFilter = tab => {
    let updateFilter = filterState
    updateFilter[umsTab][tab] = !filterState[umsTab][tab]
    setFilterState(updateFilter)
    console.log(filterState[umsTab])
  }

  const createButtons = () => {
    let FilterButtons = []

    FilterTypes[umsTab].forEach(tab => {
      FilterButtons.push(
        <Button
          kind={filterState[umsTab][tab] === false ? "primary" : "secondary"}
          key={tab}
          onClick={() => setFilter(tab)}
        >
          {tab}
        </Button>
      )
    })

    return FilterButtons
  }

  return <div>{createButtons()}</div>
}

Answer 1

Попробуйте изменить метод createButtons для функции Component и предоставить используемые поля в качестве свойств.При вызове функций внутри рендеринга React не может проверить, изменено ли что-то из используемых значений, и не корректно ли обновляет ShadowDOM

const CreateButtons = ({filterTypes, filterState, umsTab}) => (
<React.Fragment>
    {filterTypes[umsTab].map(tab => (
        <Button
          kind={filterState[umsTab][tab] === false ? "primary" : "secondary"}
          key={tab}
          onClick={() => setFilter(tab)}
        >
          {tab}
        </Button>
      ))
    }
</React.Fragment>
)

и в фильтрах

return <div><CreateButtons filterTypes={FilterTypes} filterState={filterState} umsTab={umsTab}/></div>