отправить функцию на хуки дочерних компонентов - PullRequest
Новая
       63

отправить функцию на хуки дочерних компонентов

0 голосов
/ 07 августа 2020

отредактировано: решено, в аргументах отсутствуют фигурные скобки

надеюсь, вы сможете прояснить эту проблему: у меня есть родительский компонент: 

function App() {
const [change, setChange] = useState(true);


const handleChange=(mode)=>{
  setChange(mode);
  console.log('change',change);
  
}

  return (
    <>
    
      <Navigation modes={handleChange}/>

, и я пытаюсь отправить handlechange дочернему компоненту, чтобы изменить состояние «изменения» (извините за именование). У меня есть дочерний компонент: 

export default function Navigation({modes}) {
    const [mode, setMode] = useState(true);

const handleMode=(mode)=>{
        setMode(mode)
    }

useEffect(() => {
        modes(mode);
       }, [ mode ]);

return (
        
            
                <div className="nav__switch">
                    <Switch handleMode={handleMode}/>
                </div>

и последний компонент, тот, который обновит режим: 

export default function Switch({modes}) {
    const [mode, setMode] = useState(true);


    useEffect(() => {
        modes(mode)
      }, [mode]);

    const modeChange=()=>{

        mode?setMode(false):setMode(true);
        console.log(mode)
    }

есть функция modeChange, которая изменяет состояние mode, который будет использоваться в качестве аргумента для функции родительского элемента, однако я получаю сообщение об ошибке, в котором говорится, что «режимы» не являются функцией, я зарегистрировал ее в консоли и вижу, что это объект со свойствами по умолчанию.

Кто-нибудь знает, что я здесь делаю не так?

спасибо

1 Ответ

1 голос
/ 07 августа 2020

Я думаю, вы делаете это правильно, но вы не ждете, пока он установит состояние. вы ведете консоль до того, как произойдет изменение. вам нужно подождать, пока он не изменится. Я думаю, вам стоит немного подождать и посмотреть, работает ли это. оберните свой console.log функцией set interval и посмотрите, есть ли разница 

setTimeout(function(){ console.log(mode); }, 3000);

В таких случаях вы должны использовать js promises, asyn c, ожидает выполнения подождите, пока задача не будет выполнена. ознакомьтесь с документацией по обещаниям здесь

...