reactjs - 正确管理 React 状态给出奇怪的错误

Question

我正在尝试使用 React 制作一个刽子手游戏。

这是代码：https ://pastebin.com/U1wUJ28G

当我点击一个字母时，我收到错误：

这是 AvailableLetter.js：

import React, {useState} 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;
        }
    }

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

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

export default AvailableLetter;

我怀疑这个错误是由于在 AvailableLetter.js 中没有正确管理状态引起的。但我不知道为什么错误显示指向 Hangman.js。

这是 props.incorrect 所指出的：Game.js：

guessedIncorrectHandler = (letter) => {
        const index = this.state.availableLetters.indexOf(letter);
        let newAvailableLetters = [...this.state.availableLetters];
        newAvailableLetters.splice(index,1);

        let newUsedLetters = [...this.state.usedLetters];
        newUsedLetters.push(letter);

        const oldValueLives = this.state.lives;
        const newValueLives = oldValueLives - 1;

        this.setState({
            usedLetters: newUsedLetters,
            availableLetters: newAvailableLetters,
            lives: newValueLives
        });
    };

应用修复类型用户建议

lives: newValueLives < 0 ? 0 : newValueLives

但是现在，当我舔一个字母时，单击一下就会随机添加多个字母以正确和不正确的字母。

如果我中断guessedIncorrectHandler 并返回true：

guessedIncorrectHandler = (letter) => {
        const index = this.state.availableLetters.indexOf(letter);
        let newAvailableLetters = [...this.state.availableLetters];
        newAvailableLetters.splice(index,1);

        let newUsedLetters = [...this.state.usedLetters];
        newUsedLetters.push(letter);

        const oldValueLives = this.state.lives;
        const newValueLives = oldValueLives - 1;

        console.log('[newValueLives] ',newValueLives); return true; // HERE INTERRUPTED

        this.setState({
            usedLetters: newUsedLetters,
            availableLetters: newAvailableLetters,
            lives: newValueLives < 0 ? 0 : newValueLives
        });
    };

现在，例如，当我单击“a”（这是正确的，因为解决方案是“apple”）时，它的行为正确。

当应用程序运行时，我收到警告：

Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.
in AvailableLetter (at Letters.js:8)
...

这个警告的原因可能是在 AvailableLetter.js 内部返回：

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

尝试在此处设置代码沙箱：https ://codesandbox.io/s/fast-breeze-o633v

标签： reactjs

Answer 1

如果lives值为负数，则可能会出现此问题。

尝试确保这种可能性：

this.setState({
   usedLetters: newUsedLetters,
   availableLetters: newAvailableLetters,
   lives: newValueLives < 0 ? 0 : nevValueLives, // if lives is negative, assign 0
});