时间戳

首页 > 解决方案 > 当用户在我的刽子手游戏中输入错误的猜测时，无法显示刽子手的不同图片

reactjs - 当用户在我的刽子手游戏中输入错误的猜测时，无法显示刽子手的不同图片

问题描述

当用户输入一个字母并且输入错误时，不会弹出正确的图像。我能够显示第一张图片（绞刑架），但除此之外，当用户输入错误的字母时它不会改变。

我尝试了多种方法，例如导入图片和要求，但没有任何效果。也尝试过将函数“updateAttempts()”设置为只是尝试，但同样的事情正在发生。

class HangmanPicture extends React.Component {
      updatePicture()
      {
        const image0 = require('./hangman0.png');
        const image1 = require('./hangman1.png');
        const image2 = require('./hangman2.png');
        const image3 = require('./hangman3.png');
        const image4 = require('./hangman4.png');
        const image5 = require('./hangman5.png');
        const image6 = require('./hangman6.png');

          let image = image0;
          if(this.props.updateAttempts === 5)
          image = image1
          else if(this.props.updateAttempts === 4)
          image = image2
          else if(this.props.updateAttempts === 3)
          image = image3
          else if(this.props.updateAttempts === 2)
          image = image4
          else if(this.props.updateAttempts === 1)
          image = image5
          else if(this.props.updateAttempts === 0)
          image = image6

           return (<img src={image} alt="" />)
      }

      render(){

        return(
            <div className="HangmanPicture">
             {this.updatePicture()}
            </div>
        );


      }
    }

它编译时没有带有警告的错误消息，但除此之外它有点工作

标签： reactjsreact-native

解决方案

好吧，首先，您需要绑定 updatePicture 或使其成为箭头函数。

所以 updatePicture 应该是：

updatePicture = () => {
  ...
}

此外， this.props.updateAttemps 必须以某种方式更新。如果您不更新任何状态，您认为 updateAttemps 将如何更改并显示正确的图像？

推荐阅读