javascript - React.js 无法读取我的状态

Question

我 Unresolved 问题是状态...将尝试标记点，通常是关于暂停()，恢复()如果您有任何其他建议，请随意。

提前致谢!

enter code here
import ReactDOM from 'react-dom';
import React from "react";
import {Router, Route, Link, IndexLink, IndexRoute, hashHistory} from 'react-router';

let BODY = 1, FOOD = 2;
let KEYS = {left: 37, up: 38, right: 39, down: 40};
let DIRS = {37: true, 38: true, 39: true, 40: true};

export class SnakeGames extends React.Component {
constructor(props) {
    super(props);
    const start = this.props.startIndex || 21;
    const snake = [start], board = [];
    board[start] = BODY;
    this.state = {
        snake: snake,
        board: board,
        growth: 0,
        paused: true,
        gameOver: false,
        direction: KEYS.right
    }

}

componentDidMount() {
    this.resume();
}

reset(something) {
    console.log(something);
    this.setState(this.getInitialState());
    this.resume();
}

pause() {
    if ***(this.state.gameOver || this.state.paused)*** {
        return;
    }
    this.setState({paused: true});
}

resume() {
    if ***(this.state.gameOver || !this.state.paused)*** {
        return;
    }
    this.setState({paused: false});
    this.refs.board.focus();
    this.tick();
}

tick() {
    if (this.state.paused) {
        return;
    }
    const snake = this.state.snake;
    const board = this.state.board;
    const growth = this.state.growth;
    const direction = this.state.direction;

    const numRows = this.props.numRows || 20;
    const numCols = this.props.numCols || 20;
    const head = getNextIndex(snake[0], direction, numRows, numCols);

    if (snake.indexOf(head) !== -1) {
        this.setState({gameOver: true});
        return;
    }

    const needsFood = board[head] === FOOD || snake.length === 1;
    if (needsFood) {
        let ii, numCells = numRows * numCols;
        do {
            ii = Math.floor(Math.random() * numCells);
        } while (board[ii]);
        board[ii] = FOOD;
        this.state.growth += 2;
    } else if (growth) {
        this.state.growth -= 1;
    } else {
        board[snake.pop()] = null;
    }

    snake.unshift(head);
    board[head] = BODY;

    if (this.nextDirection) {
        this.state.direction = this.nextDirection;
        this.nextDirection = null;
    }

    this.setState({
        snake: snake,
        board: board,
        growth: growth,
        direction: direction
    });

    setTimeout(this.tick, 100);
}

handleKey(event) {
    var direction = event.nativeEvent.keyCode;
    var difference = Math.abs(this.state.direction - direction);
    // if key is invalid, or the same, or in the opposite direction
    if (DIRS[direction] && difference !== 0 && difference !== 2) {
        this.nextDirection = direction;
    }
}

render() {
    let cells = [];
    const numRows = this.props.numRows || 20;
    const numCols = this.props.numCols || 20;
    const cellSize = this.props.cellSize || 30;

    for (let row = 0; row < numRows; row++) {
        for (let col = 0; col < numCols; col++) {
            let code = this.state.board[numCols * row + col];
            let type = code === BODY ? 'body' : code === FOOD ? 'food' : 'null';
            cells.push(<div className={type + '-cell'}/>);
        }
    }

    return (
        <div className="snake-game">
            <h1 className="snake-score">Score: {this.state.snake.length}</h1>
            <div
                ref="board"
                className={'snake-board' + (this.state.gameOver ? ' game-over' : '')}
                tabIndex={0}
                onBlur={this.pause}
                onFocus={this.resume}
                onKeyDown={this.handleKey}
                style={{width: numCols * cellSize, height: numRows * cellSize}}>
                {cells}
            </div>
            <div className="snake-controls">
                {this.state.paused ? <button onClick={this.resume}>Resume</button> : null}
                {this.state.gameOver ? <button onClick={this.reset}>New Game</button> : null}
            </div>
            <button className="btn"><Link to="/snakemenu">RETURN</Link></button>
            <button className="btn"><Link to="/snakegameover">GAME OVER</Link></button>
        </div>
    );
}
}

function getNextIndex(head, direction, numRows, numCols) {
let x = head % numCols;
let y = Math.floor(head / numCols);

switch (direction) {
    case KEYS.up:
        y = y <= 0 ? numRows - 1 : y - 1;
        break;
    case KEYS.down:
        y = y >= numRows - 1 ? 0 : y + 1;
        break;
    case KEYS.left:
        x = x <= 0 ? numCols - 1 : x - 1;
        break;
    case KEYS.right:
        x = x >= numCols - 1 ? 0 : x + 1;
        break;
    default:
        return;
}

// translate new x/y coords back into array index
return (numCols * y) + x;
}

Answer 1

您需要将恢复和暂停方法绑定(bind)到“this”对象，以便引用该对象上的任何字段。而不是:

<button onClick={this.resume}>Resume</button>

你会使用:

<button onClick={this.resume.bind(this)}>Resume</button>

其他函数绑定(bind)也是如此:

<div
     ref="board"
     className={'snake-board' + (this.state.gameOver ? ' game-over' : '')}
     tabIndex={0}
     onBlur={this.pause.bind(this)}
     onFocus={this.resume.bind(this)}
     onKeyDown={this.handleKey.bind(this)}
     style={{width: numCols * cellSize, height: numRows * cellSize}}>
     {cells}
</div>

<小时/>

正如 John Weisz 在评论中提到的，如果在 render 方法中进行所有绑定(bind)调用，性能往往会受到影响。最好将这些调用移至构造函数:

constructor(props) {
    super(props);
    const start = this.props.startIndex || 21;
    const snake = [start], board = [];
    board[start] = BODY;
    this.state = {
        snake: snake,
        board: board,
        growth: 0,
        paused: true,
        gameOver: false,
        direction: KEYS.right
    }

    this.pause = this.pause.bind(this);
    this.resume = this.resume.bind(this);
    this.handleKey = this.handleKey.bind(this);
}

然后，您无需触摸渲染中的任何现有代码即可添加绑定(bind)。