const LecturesExerciseItem = props => {
  const hasMultipleVideos = hasSectionMultipleVideos(props.sectionUUID)
  if (!hasMultipleVideos) return <SectionListItem {...props} />

  // multiple videos
  const [isAccordionOpen, setIsAccordionOpen] = useState(false)
  ....
  return <h1> multiple videos </h1>
}

Перехватчик React "useState" вызывается условно. Перехватчики React должны вызываться в одном и том же порядке при рендеринге каждого компонента.

Как можно раньше вернуть какой-либо компонент в зависимости от состояния внутри функционального компонента с помощью крючков?

0
Henok Tesfaye 16 Апр 2020 в 12:06

1 ответ

Лучший ответ

У вас есть 2 варианта:

  1. Наденьте крючки на верхнюю часть детали.
  2. Используйте компонент-оболочку, например.
const LecturesExerciseItem = props => {
  const hasMultipleVideos = hasSectionMultipleVideos(props.sectionUUID)
  if (!hasMultipleVideos) return <SectionListItem {...props} />

  // multiple videos
  ....
  return <MultipleVideos {...props}/>
}

const MultipleVideos = props => {
  const [isAccordionOpen, setIsAccordionOpen] = useState(false)
  ....
  return <h1> multiple videos </h1>
}
2
kkesley 16 Апр 2020 в 09:09