Question

这是一个Clicky游戏，要求您单击每个图像一次而不单击两次。我遇到的问题是在单击所有图像后重置游戏。它当前可以使用，但是要求您在所有十二个步骤都完成后才单击随机图像以渲染控制台日志（您赢了）并重置游戏板。我正试图消除最后一次点击。

开始出现无法渲染console.log（您赢了）的问题。通过尝试删除了代码，以清除错误并隔离我的代码在哪里工作。我觉得问题出在我尝试研究的handleClick函数上，但在消除这种额外点击方面，我还没能提出很多建议。我觉得我不知道我应该寻找什么才能走上正确的轨道。

class App extends Component {
constructor(props) {
    super(props)

    this.state = {
        cards,
        score: 0,
        hiscore: 0,
        message: '',
        clicked: [],
    }
}

handleReset = () => {
    this.setState({
        score: 0,
        hiscore: this.state.hiscore,
        message: '',
        clicked: [],
    })
    this.handleShuffle()
}

handleGuess = () => {
    let newScore = this.state.score + 1
    this.setState({
        score: newScore,
    })

    if (newScore >= this.state.hiscore) {
        this.setState({
            hiscore: newScore,
        })
    }
    this.handleShuffle()
}

handleClick = id => {
    if (this.state.clicked.indexOf(id) === -1) {
        this.setState({ clicked: this.state.clicked.concat(id) })
        this.handleGuess()
    } else if (this.state.clicked.length === 12) {
        let win = 'You Win'
        this.setState({
            message: win
        })
        console.log(win)
        this.handleReset()
    } else {
        let lose = 'You Lose'
        this.setState({
            message: lose
        })
        console.log(lose)
        this.handleReset()
    }
}

我希望在成功选择第12张图像后将其重置为打开状态。它仅在成功单击每个图像一次后单击任何随机图像时有效。

Answer 1

您可以使用componentDidUpdate()，它会在您更新组件状态或道具时执行。

因此，当用户单击最后一张卡片和最后一张卡片时，您的组件状态就会更新，并触发componentDidUpdate()

componentDidUpdate(){
  if(this.state.clicked.length == 12){
    console.log("You win")
    window.alert("You win")
    this.handleReset()
  }
}

因此我们在其中定义了一个条件，如果通过则将运行。

此外，要在应用启动时发出警报，您可以执行以下操作：

componentDidMount(){
   window.alert("My instructions:")
}

有没有办法消除我的游戏当前需要重新启动的额外点击？

1 个答案: