Блог

Я пытаюсь реализовать очень простой пользовательский перехват под названием useOpen, который просто возвращает логическое значение (isOpen). Я хочу показать или скрыть некоторый текст в App.js на основе состояния isOpen. В настоящее время ничего не отображается и не пытается console.log (isOpen) в App.js выдает мне undefined. Заранее спасибо!

App.js

 import React from 'react'
import useOpen from './CustomHooks/useOpen'

function App () {
 const {isOpen} = useOpen;

return (
<div className='App'>
  {isOpen amp;amp; <p>isOpen</p>}
</div>
)
}

export default App
  

useOpen.js

 import { useState } from 'react'
export default function useOpen() {
    const [isOpen, setIsOpen] = useState(true)
    return { isOpen }
 }
  

Вам не хватает скобок в useOpen . Должно быть useOpen() .

 const {isOpen} = useOpen; // missing ()
  

 const {isOpen} = useOpen();
  

Попробуйте вызвать функцию useOpen в компоненте.

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

App.js

 import React from 'react'
import useOpen from './CustomHooks/useOpen'

function App () {
 //const {isOpen} = useOpen;
 const isOpen = useOpen();

return (
<div className='App'>
  {isOpen amp;amp; <p>isOpen</p>}
</div>
)
}

export default App
  

useOpen.js

 import { useState } from 'react'
export default function useOpen() {
    const [isOpen, setIsOpen] = useState(true)
    //return { isOpen }
    return isOpen
 }