Что происходит не так, когда я передаю логическое значение от дочернего к его родительскому компоненту с помощью React Hooks? - PullRequest
0 голосов
/ 24 апреля 2020

В настоящее время я пытаюсь пересмотреть компонент выпадающего меню на моем сайте Gatsby, чтобы он сообщал логическое значение своему родительскому компоненту, панели навигации. Я планирую использовать это логическое значение для запуска некоторого условного CSS в Emotion.

Логическое значение isOpen сообщает, открыто или нет раскрывающееся меню, поэтому true означает, что оно открыто, а false означает, что это не так.

На данный момент я использую React Hooks для передачи этих данных от дочернего к родительскому компоненту. Похоже, что я успешно передаю данные, но когда я щелкаю раскрывающееся меню, он отправляет как истинное, так и ложное логическое значение в быстрой последовательности, даже если меню остается открытым.

Как мне изменить это код, чтобы isOpen в дочернем компоненте правильно сообщался родительскому компоненту?

import React, { useState, useEffect } from "react"

const Child = ({ isExpanded }) => {
  const [expandState, setExpandState] = useState(false)

  useEffect(() => {
    setExpandState(isOpen)
    isExpanded(expandState)
  })

  return(
    <dropdownWrapper>
      <button 
        {...isExpanded}
      />
      {isOpen && (
        <Menu>
          //menu items go here
        </Menu>
      )}
    </dropdownWrapper>
  )
}

const Parent = () => {
  const [expandState, setExpandState] = useState(false)

  const onExpand = (checkExpand) => {
    setExpandState(checkExpand)
  }

  return(
    <Dropdown 
     isExpanded={onExpand}
     onClick={console.log(expandState)}
    />
 )

}

1 Ответ

0 голосов
/ 24 апреля 2020

понял это сам. Родителю нужен был useEffect для регистрации входящего логического значения.

Фиксированный код для родителя:

const Parent = () => {
  const [expandState, setExpandState] = useState(false)

  const onExpand = (checkExpand) => {
    setExpandState(checkExpand)
  }

  useEffect(() => {
    onExpand(expandState)
  })

  return(
    <Dropdown 
     isExpanded={onExpand}
     onClick={console.log(expandState)}
    />
 )

}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...