你如何访问多个组件中的反应挂钩？我的反应钩子做错了什么？

Question

我试图将状态值传递到组件中。为什么它在一个组件中工作而不在同一文件夹中的另一个组件中工作？

我这里有钩子。我正在尝试访问“currentGuess”。在这个函数中，我将 currentGuess 的状态初始化为“”，然后下一部分只是将“currentGuess”设置为您输入的任何内容。

----------------------/src/hooks/useWordle.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;

我可以像这样在这里使用它并且没有问题：

----------------------源代码/组件/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: "" }"
  };

如果你做到了这一步，非常感谢你。我对此很陌生，希望知道自己在做什么的人可以看到我可以修复的代码中的一些明显缺陷。你甚至不必为我解决它，但你能给我指明正确的方向吗？如何使“currentGuess”变量/状态可以在密钥.js零件？

Answer 1

Hooks 旨在共享行为，而不是状态。在Wordle 组件中调用useWordle 会在内存中为currentGuess 创建一个与在Key 组件中调用useWordle 完全不同的变量（记住，毕竟，钩子只是常规的旧函数！ ).换句话说，您有两个完全独立的 currentGuess 浮动版本，每个组件一个。

如果您想共享状态，请使用 Context API，使用状态管理库（例如 Redux、MobX 等），或者只是 lift state up。