时间戳

首页 > 解决方案 > useParams 不适用于 useState（React 挂钩）

reactjs - useParams 不适用于 useState（React 挂钩）

问题描述

我试图制作一个具有动态变量的组件，该变量会根据特定路线而变化。我使用 useParams 提取了两个变量，例如 gameName 和 taskNumber。我还设置了状态以使用这两个参数进行快速更改。但是，我没有让它工作。我也试过useEffect。我注意到状态保持与初始值相同。因为每个游戏都有不同的任务，它们有不同的提示，所以我想使用条件语句来传递这些提示。

目前，路径是/timesup/:gameName/:taskNumber

  const FailScreen = () => {
  const { gameName, taskNumber } = useParams();
  const [prompt, setPrompt] = useState("");
  if (gameName === "zoomchat") {
    if (taskNumber === 1) {
      setPrompt("[mute callers]");
    } else {
      setPrompt("answers");
    }
  }

  return (
    <div>
      <PromptBox
        title="Time's Up!"
        msg={`Oh no! You didn’t find all the ${prompt}`}
      />
    
      <Link to="/">
        <Button/>
      </Link>
    </div>
  );
};

理想情况下，我不想对提示进行硬编码。它存在于每个游戏的另一个兄弟组件中。我不确定如何将这些信息提取到这里。我尝试了 useContext 但它也不起作用。

标签： reactjs

解决方案

你的组件FailScreen在我看来完全没问题。您只需要将此组件放在Router带有/timesup/:gameName/:taskNumber路径的组件中即可。

所以，它应该是这样的：

<Route path="/:id/about">
 <FailScreen />
</Route>

推荐阅读