Question

import React, {useState, useEffect} from 'react';
import classes from './AvailableLetter.module.css';

const AvailableLetter = (props) => {
    const [show,setShow]=useState(true);
    // const [clicked, setClicked]=useState(false);
    // const [outcome,setOutcome]=useState(false);

    // if (show)
    // {
    //     setClicked(true);
    // }

    // const play = (alphabet) => {
    //     const solution = props.solution.split('');
    //     if (solution.indexOf(alphabet)<0)
    //     {
    //         return false;
    //     }
    //     else
    //     {
    //         return true;
    //     }
    // }

    const setStuff = () => {
        setShow(true);
        props.setSolved();
    };
    useEffect( ()=>setStuff(),[show] );

    // useEffect( ()=>setShow(true),[show] );
    // useEffect( ()=>props.setSolved(),[show] );

    if (!show)
    {
        if (props.play())
        {
            props.correct();
            // alert('correct');
        }
        else
        {
            props.incorrect();
            // alert('wrong');
        }
    }

    const letter = show ? <span onClick={()=>setShow(false)} className={classes.AvailableLetter}>{props.alphabet}</span> : null;

    return (
        <span>
            {letter}
        </span>
    );
}

export default AvailableLetter;

此代码在编译时有错误：

./ src / Letters / AvailableLetter / AvailableLetter.js 第30:31行：React Hook useEffect缺少依赖项：'setStuff'。要么包含它，要么删除依赖项数组react-hooks / exhaustive-deps

该如何解决？

Answer 1

如果您的setStuff函数仅在useEffect内部使用。尝试在useEffect中定义它们

useEffect(() => {
   const setStuff = () => {
        setShow(true);
        props.setSolved();
   };
   setStuff()
}, [show])

React Hook useEffect缺少依赖项：'setStuff'

1 个答案: