Sự kiện React.js cần 2 lần nhấp để thực thi

Question

Tôi đang xây dựng Game of Life bởi React.js và tôi gặp khó khăn trong một tình huống khó chịu: Mọi sự kiện tôi đặt là onClick={ event } cần 2 lần nhấp để thực thi.

Hãy để tôi diễn tả hơn: Như bạn có thể thấy trong mã của tôi dưới đây, tôi có 2 nút (một nút là thay đổi kích thước của hội đồng quản trị đến 10 x 10, một trong những khác là để thay đổi tốc độ khoảng thời gian).

Mọi thứ đều ổn, ngoại trừ khi tôi nhấp vào hai nút này, tôi cần phải nhấp đúp để thực thi. Trong lần nhấp đầu tiên, với Công cụ nhà phát triển React trong Chrome, tôi có thể thấy rằng các trạng thái bao gồm width, height, speed bị thay đổi, nhưng trạng thái board vẫn không thay đổi. Chỉ sau lần nhấp thứ hai, trạng thái board bị thay đổi.

Bất kỳ ai cũng có thể giải thích lý do tại sao và chỉ cho tôi cách khắc phục? Cảm ơn bạn

Đây là một phần của mã của tôi

var GameBoard = React.createClass({ 
    getInitialState: function() { 
     return { 
      width: 10, 
      height: 10, 
      board: [], 
      speed: 1000, 
     }; 
    }, 

    // clear the board to the initial state 
    clear: function(width, height) { 
     this.setState({ 
      width: width, 
      height: height, 
     }); 
     this.setSize(); 
     clearInterval(this.game); 
    }, 

    // set the size of the board 
    setSize: function() { 
     var board = []; 
     for (var i = 0; i < this.state.height; ++i) { 
      var line = []; 
      for (var j = 0; j < this.state.width; ++j) 
       line.push(0); 
      board.push(line); 
     } 
     this.setState({ 
      board: board 
     }); 
    }, 

    // start the game 
    start: function() { 
     this.game = setInterval(this.gameOfLife, this.state.speed); 
    }, 

    gameOfLife: function() { // game of life }, 

    // change the speed of the game 
    changeSpeed: function(speed) { 
     this.setState({ speed: speed }); 
     clearInterval(this.game); 
     this.start(); 
    }, 

    // change the size to 10 x 10 
    smallSize: function() { 
     this.clear(10, 10); 
    }, 

    render: function() { 
     return (
      <div className="game-board"> 
       <h1>Conway's Game of Life</h1> 
       <h2>Generation: { this.state.generation }</h2> 
       <div className="control"> 
        <button className="btn btn-default" onClick={ this.start }>Start</button> 

       </div> 

       <Environment board={ this.state.board } onChangeSquare = { this.onChangeSquare }/> 

       <div className="size"> 
        <h2>Size</h2> 
        <button className="btn btn-default" onClick={ this.smallSize }>Small (10 x 10)</button> 
       </div> 

       <div className="speed"> 
        <h2>Speed</h2> 
        <button className="btn btn-default" onClick={ this.changeSpeed.bind(this, 900) }>Slow</button> 
       </div> 
      </div> 
     ) 
    } 
}); 

Answer 1

Lý do là tình trạng của một thành phần không thay đổi ngay lập tức.

Trong phương thức clear() bạn đặt trạng thái chiều rộng và chiều cao. Nhưng nội bộ khi họ phản ứng phương thức setSize(), chúng sẽ không được cập nhật ngay lập tức. Chúng sẽ chỉ được cập nhật khi chúng đạt đến phương thức hiển thị.

Khi bạn nhấp vào nút lần thứ hai, các trạng thái sẽ được cập nhật chính xác. Đó là lý do tại sao nó hoạt động trong trường hợp thứ hai.

Một giải pháp xin vui lòng không giữ chiều rộng và chiều cao khi nhà nước sử dụng nó trong đạo cụ. Giữ 10 * 10 như một giá trị mặc định tách và sử dụng nó trong phương thức setSize.