Reactjs 应该使用挂钩显示/隐藏组件的链接未按预期工作

我有下面的组件，它应该根据按钮点击加载另外两个组件

我的游戏副本组件应该在我点击“副本页面”链接时加载，它还应该隐藏“游戏角色”组件

类似地，但“CharacterPage”按钮相反

然而，当我点击任何一个按钮时，什么都没有发生。没有更改，没有加载，也没有错误

所以我不知道接下来该怎么办

我遵循了一些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>

    );
}

import React，{useState}来自“React”；
从“./App”导入游戏副本；
从“./Character/App”导入游戏角色；
常量管理=（）=>{
const[showDunceon，setDunceon]=useState（false）；
const[showCharacter，setCharacter]=useState（false）；
const handleCharacterClick=e=>{setDungeon（false）&&setCharacter（true）}；
const handleDungeonClick=e=>{setCharacter（false）&&setDungeon（true）}；
返回(






{showDungeon&}
{showCharacter&&}
);
}

我有什么遗漏或做错的吗

---

谢谢

您必须将回调函数作为prop直接传递。另外，使用

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>

    );
}

import React，{useState，useCallback}来自“React”；
从“./App”导入游戏副本；
从“./Character/App”导入游戏角色；
常量管理=（）=>{
const[showDunceon，setDunceon]=useState（false）；
const[showCharacter，setCharacter]=useState（false）；
const handleCharacterClick=useCallback（e=>setDungeon（false）| | setCharacter（true））；
const handleDungeonClick=useCallback（e=>setCharacter（false）| | setDungeon（true））；
返回(






{showDungeon&}
{showCharacter&&}
);
}

您必须将回调函数作为prop直接传递。另外，使用

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>

    );
}

import React，{useState，useCallback}来自“React”；
从“./App”导入游戏副本；
从“./Character/App”导入游戏角色；
常量管理=（）=>{
const[showDunceon，setDunceon]=useState（false）；
const[showCharacter，setCharacter]=useState（false）；
const handleCharacterClick=useCallback（e=>setDungeon（false）| | setCharacter（true））；
const handleDungeonClick=useCallback（e=>setCharacter（false）| | setDungeon（true））；
返回(






{showDungeon&}
{showCharacter&&}
);
}

您的代码有几个问题。您可以通过以下更改来解决此问题：

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>

    );
}

import React，{useState}来自“React”；
从“./App”导入游戏副本；
从“./Character/App”导入游戏角色；
函数Admin（）{
const[showDunceon，setDunceon]=useState（false）；
const[showCharacter，setCharacter]=useState（false）；
函数handleCharacterClick（）{
地牢（假）；
设置字符（真）；
}
函数handleDungeonClick（）{
设置字符（假）；
地牢（真）；
}
返回(






{！！showDungeon&}
{！！showCharacter&&}
);
}

您的代码有几个问题。您可以通过以下更改来解决此问题：

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>

    );
}

import React，{useState}来自“React”；
从“./App”导入游戏副本；
从“./Character/App”导入游戏角色；
函数Admin（）{
const[showDunceon，setDunceon]=useState（false）；
const[showCharacter，setCharacter]=useState（false）；
函数handleCharacterClick（）{
地牢（假）；
设置字符（真）；
}
函数handleDungeonClick（）{
设置字符（假）；
地牢（真）；
}
返回(






{！！showDungeon&}
{！！showCharacter&&}
);
}

我将useCallback函数添加到了这两个函数中，但仍然没有任何结果。但是也没有错误。问题是回调

setDungeon

和

setCharacter

返回v