Question

我试图制作一个带有动态变量的组件，该变量会根据特定路线而变化。我使用 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 但也没有用。

Answer 1

你的组件 new_cols = ["season"].extend(cols) 在我看来完全没问题。您只需将此组件放入具有 FailScreen 路径的 Router 组件中即可。

所以，它应该是这样的：

/timesup/:gameName/:taskNumber

useParams 不适用于 useState（反应钩子）

1 个答案: