如何在多个组件中访问react钩子?我的react钩子哪里做错了?

Question

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

我有钩子在这里。我正在尝试访问"currentguess"。在这个函数中，我将currentGuess的状态初始化为"，然后下一部分只设置"currentGuess">

----------------------/src/钩/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;

我可以像这样在这里使用它，它没有问题:

----------------------src/组件/Wordle.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} = useWordle(solution);

然而，当我将这行放入代码中时，"currentGuess">

----------------------/src/组件/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 &;变量/状态可以在Key.js中访问组件?

Answer 1

钩子用于共享行为，而不是状态。在Wordle组件中对useWordle的调用在内存中为currentGuess创建了一个与在Key组件中对useWordle的调用完全不同的变量(记住，毕竟，钩子只是常规的旧函数!)换句话说，你有两个完全独立的currentGuess版本，在每个组件中一个。

如果你想共享状态，使用上下文API，使用状态管理库(如Redux, MobX等)，或者只是提升状态。