#6 不能摸的狗(二)


  • 0
    administrators

    @Hazel 注意题目说的:

    这只狗跑一段时间(20~50ms)以后就会停下来,也不叫了。


  • 0
    administrators

    @胡子大哈 20ms ~ 50ms


  • 0

    @胡子大哈 我晕。。。。


  • 0

    @胡子大哈 好的,我再去补补课。谢谢啦!


  • 0

    你好。为什么我提交代码的时候报错了呢?![alt text](image url!http://ongbu23mm.bkt.clouddn.com/reactJS.png)


  • 1
    administrators

    @niuniu 贴一下你代码?


  • 0

    @胡子大哈

    class Dog extends Component {
      constructor () {
        super()
        this.state = {
          isRunning: false,
          isBarking: false
        }
      }
      
     bark () {
        console.log('dog is barking!');
       this.setState ({
          isBarking: true,
        });
        
        setTimeout( () => {
          this.setState ({
            isBarking: false
          })
        },3000)
      }
      
      run () {
       this.bark();
        console.log('dog is running!');
        this.setState ({
          isRunning: true,
        });
        
        setTimeout( () => {
          this.setState ({
            isRunning: false
          })
        },2000)
      }
     
      render () {
        const {isRunning,isBarking} = this.state.isRunning;
        return (
          <div>
            <div onClick={this.run.bind(this)}>DOG</div>
            <div>{ isRunning ? 'the dog is running' : 'the dog stoped' }</div>
            <div>{ isBarking ? 'the dog is barking' : 'the dog stoped barking' }</div>
          </div>
         )
      }
    }
    

    刚刚又提交了一次,没有报上次那个错误了,提示我“小狗叫或者跑的时候你并没有进行 setState”。您帮我看看吧,谢谢你


  • 0

    @胡子大哈 setTimeout(() => this.setState({ isBarking: false }), 20) 这里为什么是return 新设置的值?不是只需要写这个设置语句就可以了?


  • 0

    @niuniu const {isRunning,isBarking} = this.state.isRunning;这条语句是做什么的?


  • 0

    我觉得很奇怪,这样的形式就报错是为什么,这里的写法是你上一个里面说的
    0_1496230663259_upload-aef61a5d-3d27-41c7-b03f-e3da73a17da4


  • 0
    administrators

    @thecat bind 返回一个新的函数,而不会调用这个函数。可以详细了解一下 bind 的用法


  • 0

    @梦610
    oh ,我看到了,谢谢指教!太粗心了,好尴尬。


  • 0

     touch (){
        this.bark();
        this.run();
        setTimeout(()=>{
          this.setState((prevState)=>{
            return {
              prevState.isBarking: false,
              prevState.isRunning: false
          })
        },40);
      }
     
    

    这里 this.setState传参不用函数那个方法 是跟定时器是异步的 有关么?可是这样写会报错我就不理解了,是因为this指向?请大哈哥解答好么


  • 0
    administrators

    @summerwait JavaScript 没有这种语法:

          this.setState((prevState)=>{
            return {
              prevState.isBarking: false,
              prevState.isRunning: false
          })
    

    这是有语法错误,可能需要进一步了解一下 JavaScript 的一些语法知识。


  • 0

    @胡子大哈

    handleClickOnLikeButton () {
           this.setState((prevState) => {
             return { count: 0 }
           })
           this.setState((prevState) => {
             return { count: prevState.count + 1 } // 上一个 setState 的返回是 count 为 0,当前返回 1
           })
           this.setState((prevState) => {
             return { count: prevState.count + 2 } // 上一个 setState 的返回是 count 为 1,当前返回 3
           })
           // 最后的结果是 this.state.count 为 3
         }
    

    语法是按照这里写的呀,,您是指

    return {
              prevState.isBarking: false,
              prevState.isRunning: false
          }
    

    这里prevState.用的不对么?


  • 1

    @胡子大哈 看来是的了,谢谢大哈哥

    touch (){
        this.bark();
        this.run();
        setTimeout(()=>{
          this.setState((prevState)=>{
            return  {
              isBarking: !prevState.isBarking,
              isRunning: !prevState.isRunning
            }
          })
        },40);
      }
    

    这里改成这样写都是对的了,看来是之前我思路不清晰,谢谢啦~!


  • 1

    请教一下,还是有点不明白

    为什么在#5中,可以直接用

    render () {
        return (
            <div onClick={ this.run(),this.bark() }>DOG</div>
        )
    }
    
    

    但是在#6这个题目里面却只能用

    <div onClick={this.handleClickOnDog.bind(this)}>DOG</div>
    

    前面您解答其他人的回答看了,但是还是觉得不明,能否麻烦您详细解释一下呢?


  • 0

    
    class Dog extends Component {
      constructor(){
        super()
        this.state = {
          isRunning: false,
          isBarking: false
        }
      }
    
      // 随机数(秒数)
      getRandomArbitrary(min, max) {
      return Math.floor(Math.random() * (max - min)) + min;
      }
    
    
      run(){
        this.setState( {
          isRunning: true,
        })
        setTimeout(() => this.setState({ isRunning: false }), this.getRandomArbitrary(2000,5000)) //2~5秒, 20~50毫秒眼花+_+
      }
    
      bark(){
        this.setState( {
          isBarking: true,
        })
        setTimeout(() => this.setState({ isBarking: false }), this.getRandomArbitrary(2000,5000)) //2~5秒, 20~50毫秒眼花+_+
      }
    
      handleDog(){
        this.run()
        this.bark()
      }
    
      render(){
        return (
          <div>
            <button onClick={this.handleDog.bind(this)}>HandleDog</button>
            <h5>{this.state.isRunning ? 'Dog is Running' : 'Dog is stoped'}</h5>
            <h5>{this.state.isBarking ? 'Dog is Barking' : 'Dog is stop barking'}</h5>
          </div>
        )
      }
    }
    

  • 3

    @胡子大哈

    一段时间(20~50ms)这个应该是随机 我写了下

    @JonHo666#6 不能摸的狗(二) 中说:

    
    class Dog extends Component {
      constructor(){
        super()
        this.state = {
          isRunning: false,
          isBarking: false
        }
      }
    
      // 随机数(秒数)
      getRandomArbitrary(min, max) {
      return Math.floor(Math.random() * (max - min)) + min;
      }
    
    
      run(){
        this.setState( {
          isRunning: true,
        })
        setTimeout(() => this.setState({ isRunning: false }), this.getRandomArbitrary(2000,5000)) //2~5秒, 20~50毫秒眼花+_+
      }
    
      bark(){
        this.setState( {
          isBarking: true,
        })
        setTimeout(() => this.setState({ isBarking: false }), this.getRandomArbitrary(2000,5000)) //2~5秒, 20~50毫秒眼花+_+
      }
    
      handleDog(){
        this.run()
        this.bark()
      }
    
      render(){
        return (
          <div>
            <button onClick={this.handleDog.bind(this)}>HandleDog</button>
            <h5>{this.state.isRunning ? 'Dog is Running' : 'Dog is stoped'}</h5>
            <h5>{this.state.isBarking ? 'Dog is Barking' : 'Dog is stop barking'}</h5>
          </div>
        )
      }
    }
    

  • 0

    在做习题的时候,点击DOG后,执行bark函数:

    bark () {
        this.setState(() => 
             { return { isBarking: true } }
         )
         if(this.state.isBarking) {
             console.info('barking now')
         }
    }
    

    我知道setState无法实时改变,于是想改成书里的方法,传个参数:

    bark () {
        this.setState((prevState) => 
             { return { isBarking: true } }
         )
         if(prevState.isBarking) {
             console.info('barking now')
         }
    }
    

    但是会报 prevState 未定义,请问应该怎么修改?

    最后我使用了这种方法解决了问题:

     bark () {   
        this.setState(
            { isBarking: true }, () => {
                console.info('barking now')
            }
        )
      }
    

    但是我还是不大懂 这种写法与书里的写法的区别?


登录后回复
 

与 ScriptOJ 的连接断开,我们正在尝试重连,请耐心等待