时间戳

首页 > 解决方案 > 尝试构建我的游戏板 - 但遇到未定义的 ID 问题

javascript - 尝试构建我的游戏板 - 但遇到未定义的 ID 问题

问题描述

我试图让我的井字游戏板工作，但它一直给我同样的错误，我的 api 文件中未定义的 '_id'。我不确定它为什么会这样出现，但我将我的事件文件包含在它下面以便进行比较。我已经将它与其他人的代码进行了比较，它看起来基本相同，但每次都会吐出相同的错误消息。

const updateGame = function (index, value, over) {
  return $.ajax({
    url: config.apiUrl + '/games/' + store.game._id,
    method: 'PATCH',
    headers: {
      Authorization: 'Bearer ' + store.user.token
    },
    game: {
      cell: {
        index: index,
        value: value
      },
      over: over
    }

const api = require('./api')
const ui = require('./ui')
// const getFormFields = require('../../../lib/get-form-fields')

let gameOver = false
const board = ['', '', '', '', '', '', '', '', '']
let moves = 0

const onCreateGame = function (event) {
  event.preventDefault()
  console.log('it was clicked')
  api.createGame()
    .then(ui.onCreateGameSuccess)
    .catch(ui.onCreateGameFailure)
  $('.box').show()
}

const onCheckWinner = function (event) {
  if (board[0] !== '' && board[0] === board[1] && board[1] === board[2]) {
    return true
  } else if (board[3] !== '' && board[3] === board[4] && board[4] === board[5]) {
    return true
  } else if (board[6] !== '' && board[6] === board[7] && board[7] === board[8]) {
    return true
  } else if (board[0] !== '' && board[0] === board[3] && board[3] === board[6]) {
    return true
  } else if (board[1] !== '' && board[1] === board[4] && board[4] === board[7]) {
    return true
  } else if (board[2] !== '' && board[2] === board[5] && board[5] === board[8]) {
    return true
  } else if (board[0] !== '' && board[0] === board[4] && board[4] === board[8]) {
    return true
  } else if (board[2] !== '' && board[2] === board[4] && board[4] === board[6]) {
    return true
  }
  return false
}

const onUpdateGame = function (index, player, over) {
  event.preventDefault()

  const clickedCell = event.target
  console.log($(clickedCell).data('cell-index'))
  api.updateGame(index, player, over)
    .then(response => {
      if (player === 'X') {
        $(clickedCell).text('X')
        player = 'O'
        $('#message').text('Nice move! Player O, your turn!')
      } if (player === 'O') {
        $(clickedCell).text('O')
        player = 'X'
        $('#message').text('Nice move! Player X, your turn!')
      } if (onCheckWinner(event) === true) {
        $('#message').show().text('Game Over!')
        gameOver = !gameOver
      } else {
        $('#message').text('Please pick a space that is unoccupied!')
        setTimeout(() => {
          $('#message').text('')
        }, 2000)
      }
      ui.updateGameSucess(response, index, player)
    })
    .catch(ui.updateGameFailure)
  //
  //
  player = !player
  if (gameOver === true) {
    $('#message').show().text('Game Over!')
  }
  //
  moves++
  if (moves === 9 && onCheckWinner(event) === false) {
    $('#message').show().text('Game Over!')
    $('#message').show().text('Draw!')
    $('#message').hide()
  }
}
//  api.onClickedCell()
//    .then(ui.onClickedCellSuccess)
//    .catch(ui.onClickedCellFailure)
module.exports = {
  onCreateGame,
  onCheckWinner,
  onUpdateGame
}

标签： javascriptapi

解决方案

问题是您正在尝试获取._id未定义的引用，而此时您正在尝试这样做。可能是因为您试图在加载引用onUpdateGame()之前调用代码中的某个位置。store.game

为防止出现此错误，您可以首先检查是否存在此类引用，并且仅在安全时才采取行动。

例如：

const updateGame = function (index, value, over) {
  if(!store.game) {
    // game not loaded yet, can't update it -> just return (keep trying again later, until it gets loaded) 
    return
  } 
  // at this point 'store.game' is loaded, you can access it's '_id'.
  return $.ajax({
    url: config.apiUrl + '/games/' + store.game._id,
    method: 'PATCH',
    headers: {
      Authorization: 'Bearer ' + store.user.token
    },
    game: {
      cell: {
        index: index,
        value: value
      },
      over: over
    }

推荐阅读