reactjs - 如何从函数内部的 useState 获取值

Question

我正在尝试构建吊人游戏并希望从 checkMatchLetter 函数内的 useState 中获取值(value)，但不确定这是否可能以及我做错了什么......

import React, { useState, useEffect } from 'react';
import { fetchButton } from '../actions';
import axios from 'axios';
import 'babel-polyfill';

const App = () => {
    const [word, setWord] = useState([]);
    const [underscore, setUnderscore] = useState([]);
    const [data, setData] = useState([]);

    useEffect(() => {
        const runEffect = async () => {
            const result = await axios('src/api/api.js');
            setData(result.data)
        }
        runEffect();
    }, []);

    const randomWord = () => {
        const chosenWord = data[Math.floor(Math.random() * data.length)];
        replaceLetter(chosenWord.word);
    }

    const replaceLetter = (string) => {
      
        let getString = string; // here it shows a valid string.
        setWord(getString);
        let stringToUnderScore = getString.replace(/[a-z]/gi, '_');
        setUnderscore(stringToUnderScore);
    }

    useEffect(() => {
        const checkLetter = (event) => {
            if(event.keyCode >= 65 && event.keyCode <= 90) {
                checkMatchLetter(word, String.fromCharCode(event.keyCode).toLowerCase());
            }
        };

        document.addEventListener('keydown', checkLetter);
        return () => {
            document.removeEventListener('keydown', checkLetter);
        }
    }, []);

    const checkMatchLetter = (keyButton) => {
        console.log(keyButton);
        let wordLength = word.length;
        console.log(wordLength); // here it outputs '0'
        /// here I want word of useState here....
    }

    return (
        <div>
            <p>{word}</p>
            <p>{underscore}</p>
            <button onClick={randomWord}></button>
        </div>
    )
}

export default App;

我想在此函数中获取该值的原因是，我可以将单击的键按钮 (a-z) 与当前选择的单词进行比较。如果其他功能有问题，请随时在下面分享您的反馈。

Answer 1

您正在使用在 useEffect 中的组件渲染函数中定义的变量。 effect 并且钩子(Hook)的 deps 中缺少该变量。始终包含您需要的 deps(我强烈推荐 lint 规则 react-hooks/exhaustive-deps)。当您添加 checkMatchLetter对于 deps，您将始终在效果中拥有该函数的最新实例，而不是像现在一样始终使用第一次渲染中的旧版本。

useEffect(() => {
    const checkLetter = (event) => {
        if(event.keyCode >= 65 && event.keyCode <= 90) {
            checkMatchLetter(word, String.fromCharCode(event.keyCode).toLowerCase());
        }
    };

    document.addEventListener('keydown', checkLetter);
    return () => {
        document.removeEventListener('keydown', checkLetter);
    }
}, [checkMatchLetter, word]);

此更改将使效果在每个渲染上运行。为了解决这个问题，你可以记住你的回调。然而，这是一种新的蠕虫。