Блог

Я пытаюсь создать приложение для игры в крестики-нолики, и я получаю ошибку типа. (Ошибка типа: не удается прочитать свойство ‘0’ неопределенного)

Я думаю, что эта проблема связана с тем фактом, что значения «onClick» и «items» в Board.js не может правильно сформулировать.

Ошибка: components/GameLayout/board.js:7

    4 | 
   5 | function Board({ onClick, items }) {
   6 |   const gameSquare = (e) => {
>  7 |     return <BoardSquare value={items[e]} onClick={() => onClick(e)} />
   8 |   }
   9 |   return (
  10 |     <div className="board">
  

Ошибка: components/GameLayout/board.js:11

    8 | }
   9 | return (
  10 |   <div className="board">
> 11 |     <div className="board__row">
  12 |       {gameSquare(0)}
  13 |       {gameSquare(1)}
  14 |       {gameSquare(2)}
  

Вот мой основной игровой компонент:

 function MainGame() {
  const [rows, setRows] = useState(Array(9).fill(null))
  const [isNext, setNext] = useState(true)

  const handleClick = (e) => {
    const squares = [...rows]

    if (squares[e] || Winner(rows)) {
      return
    }
    squares[e] = isNext ? "X" : "O"
    setRows(squares)
    setNext(!isNext)
  }

  const winner = Winner(squares)
  let status = winner
    ? `Player ${winner} won!`
    : `The next player is ${isNext ? "X" : "O"} `

  return (
    <div>
      <div className="player__winner">{status}</div>
      <GameBoard onClick={() => handleClick} />
    </div>
  )
}

export default MainGame
  

Давайте проанализируем, что означает эта ошибка:

Не удается прочитать свойство ‘0’ неопределенного

Это означает, что мы something[0] что-то делаем, и так оно и something есть undefined . Вы уже определили строку, в которой это происходит:

 return <BoardSquare value={items[e]} onClick={() => onClick(e)} />
  

Здесь что-то есть items . Итак, откуда это items происходит? Похоже на реквизиты компонента:

 function Board({ onClick, items }) {
  // ...
}
  

Итак, что передается в items prop? Ваш MainGame компонент:

 <GameBoard onClick={() => handleClick} />
  

Ах ха! Это не передача items реквизита. Это означает, что так и будет undefined .

Я решил эту проблему. При вызове компонента игрового поля в основной игре я забыл добавить значение реквизита, и я определял в нем неправильную ситуацию.

Я также забыл записать событие в функцию handleclick .

 <GameBoard value={rows} onClick={(e) => handleClick(e)} />
  

После этих исправлений я добавил правильные реквизиты в компонент платы, и проблема была решена.

 function Board({ onClick, value }) {
  const gameSquare = (e) => {
    return <BoardSquare value={value[e]} onClick={() => onClick(e)} />
  }
  

вы можете предотвратить это, убедившись, что в массиве items действительно есть элементы, и убедитесь, что ваши проходящие элементы поддерживают при объявлении этого компонента в вашем среднем игровом компоненте

 function Board({ onClick, items }) {
   if(items.length <1 ) return null    

   const gameSquare = (e) => {
   return <BoardSquare value={items[e]} onClick={() => onClick(e)} />
   }
  return (
     <div className="board">.... </div>