你如何訪問多個組件中的反應掛鈎？ 我的反應鈎子做錯了什么？

Question

我試圖將 state 值傳遞到組件中。 為什么它在一個組件中工作而不在同一文件夾中的另一個組件中工作？

我這里有鈎子。 我正在嘗試訪問“currentGuess”。 在這個 function 中，我將 state 的 currentGuess 初始化為“”，然后下一部分只是將“currentGuess”設置為您輸入的任何內容。

---------------------- /src/hooks/useWord.js ------------------ --

const useWordle = (solution) => {
  const [currentGuess, setCurrentGuess] = useState("");

  /* OTHER UNNECESSARY CODE TO QUESTION */

  const handleInput = ({ key }) => {
    if (key === "Enter") {
      if (turn > 5) {
        console.log("You used all your guesses!");
        return;
      }
      if (history.includes(currentGuess)) {
        console.log("You already tried that word!");
        return;
      }
      if (currentGuess.length !== 5) {
        console.log("Word must be 5 characters long!");
        return;
      }
      const formatted = formatGuessWord();
      console.log(formatted);
    }
    if (key === "Backspace") {
      setCurrentGuess((state) => {
        return state.slice(0, -1);
      });
    }

    if (/^[a-zA-z]$/.test(key))
      if (currentGuess.length < 5) {
        setCurrentGuess((state) => {
          return state + key;
        });
      }
  };
  return {
    currentGuess,
    handleInput,
  };
};

export default useWordle;

我可以像這樣在這里使用它並且沒有問題：

---------------------- src/components/Word.js ---------------------- -

import React, { useEffect } from "react";
import useWordle from "../hooks/wordleHooks.js";

function Wordle({ solution }) {
  const { currentGuess, handleInput } = useWordle(solution);
  console.log("currentGuess=", currentGuess);

  useEffect(() => {
    window.addEventListener("keyup", handleInput);

    return () => window.removeEventListener("keyup", handleInput);
  });

  return <div>Current guess: {currentGuess}</div>;
}

export default Wordle;

我認為這條線讓我可以使用“currentGuess”。 我破壞了它。

const { currentGuess, handleInput } = useWord(solution);

但是，當我將該行放在這段代碼中時，“currentGuess”未定義或為空。

---------------------- /src/components/Key.js ------------------ --

import React, { useContext } from "react";
import { AppContext } from "../App";
import useWordle from "../hooks/wordleHooks.js";

export default function Key({ keyVal, largeKey }) {
  const { onSelectLetter, onDeleteKeyPress, onEnterKeyPress } =
    useContext(AppContext);
  const { currentGuess } = useWordle();

  const handleTypingInput = () => {
    console.log("Key.js - Key() - handleTypingInput() - {currentGuess}= ", {
      currentGuess,
    }); // COMES OUT "Object { currentGuess: "" }"
  };

如果你做到了這一步，非常感謝你。 我對此很陌生，希望知道自己在做什么的人可以看到我可以修復的代碼中的一些明顯缺陷。 你甚至不必為我解決它，但你能給我指明正確的方向嗎？ 如何在Key.js組件中訪問“currentGuess”變量/狀態？

Answer 1

掛鈎旨在共享行為，而不是 state。在Wordle組件中調用useWordle會在 memory 中為currentGuess創建一個與在Key組件中調用useWordle完全不同的變量（畢竟請記住，掛鈎只是常規的舊函數。 )，換句話說，您有兩個完全獨立的currentGuess版本，每個組件一個。

如果您想共享 state，請使用上下文 API ，使用 state 管理庫（例如Redux ， MobX等），或者直接將 state 提升。