Мои ссылки, которые должны использовать мои хуки, чтобы показать / скрыть компоненты, не работают должным образом

Question

У меня есть следующий компонент, который должен загружать два других компонента в зависимости от нажатия кнопки.

Мой компонент GameDungeon должен загружаться при нажатии на ссылку «DungeonPage», и он также должен скрывать компонент «GameCharacter».

Аналогично, но для кнопки «CharacterPage» все наоборот.

Однако, когда я нажимаю любую кнопку, ничего не происходит. Без изменений, без загрузки, а также без ошибок.

Так что я не уверен, где отсюда go.

Я следовал нескольким учебникам React & React Hooks, но я просто не могу заставить это работать.

Вот мой код:

import React, { useState } from "react";
import GameDungeon from "../App";
import GameCharacter from "../Character/App";

const Admin = () => {

    const [showDungeon, setDungeon] = useState(false);
    const [showCharacter, setCharacter] = useState(false);

    const handleCharacterClick = e => { setDungeon(false) && setCharacter(true) };
    const handleDungeonClick = e => { setCharacter(false) && setDungeon(true) };

    return (
        <div className="admin">
            <nav>
                <div>
                    <ul>
                        <li>
                            <a id="DungeonPage" href="#" onClick={ () => handleDungeonClick}>Game Dungeon</a>
                        </li>
                        <li>
                            <a id="CharacterPage" href="#" onClick={ () => handleCharacterClick}>Game Character</a>
                        </li>
                    </ul>
                </div>
            </nav>  

            <div>
                {showDungeon && <GameDungeon />}
            </div>
            <div>
                {showCharacter && <GameCharacter />}
            </div>
        </div>

    );
}

Есть что-то, что я пропускаю или делаю неправильно?

Спасибо!

Answer 1

Есть несколько проблем с вашим кодом. Что вы можете сделать, чтобы обойти эту проблему, внеся следующие изменения:

import React, { useState } from "react";

import GameDungeon from "../App";
import GameCharacter from "../Character/App";

function Admin(){
    const [showDungeon, setDungeon] = useState(false);
    const [showCharacter, setCharacter] = useState(false);

    function handleCharacterClick(){ 
      setDungeon(false); 
      setCharacter(true);
    }

    function handleDungeonClick() { 
     setCharacter(false);
     setDungeon(true); 
    }

    return (
        <div className="admin">
            <nav>
                <div>
                    <ul>
                        <li>
                            <a id="DungeonPage" href="#" onClick={handleDungeonClick}>Game Dungeon</a>
                        </li>
                        <li>
                            <a id="CharacterPage" href="#" onClick={handleCharacterClick}>Game Character</a>
                        </li>
                    </ul>
                </div>
            </nav>  

            <div>
                {!!showDungeon && <GameDungeon />}
            </div>
            <div>
                {!!showCharacter && <GameCharacter />}
            </div>
        </div>

    );
}

Answer 2

Вы должны передать функцию обратного вызова напрямую как опору. Кроме того, оберните обратный вызов хуком useCallback для лучшей производительности.

import React, { useState, useCallback } from "react";
import GameDungeon from "../App";
import GameCharacter from "../Character/App";

const Admin = () => {

    const [showDungeon, setDungeon] = useState(false);
    const [showCharacter, setCharacter] = useState(false);

    const handleCharacterClick = useCallback(e => setDungeon(false) || setCharacter(true));
    const handleDungeonClick = useCallback(e => setCharacter(false) || setDungeon(true));

    return (
        <div className="admin">
            <nav>
                <div>
                    <ul>
                        <li>
                            <a id="DungeonPage" href="#" onClick={handleDungeonClick}>Game Dungeon</a>
                        </li>
                        <li>
                            <a id="CharacterPage" href="#" onClick={handleCharacterClick}>Game Character</a>
                        </li>
                    </ul>
                </div>
            </nav>  

            <div>
                {showDungeon && <GameDungeon />}
            </div>
            <div>
                {showCharacter && <GameCharacter />}
            </div>
        </div>

    );
}