Question

我正在尝试构建一个Tic-Tac-Toe应用，并且出现 TypeError 。 （TypeError：无法读取未定义的属性“ 0”）

我认为此问题与以下事实有关：Board.js中的“ onClick ”和“ 项目”值无法正确陈述。

错误：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)}

这是我的MainGame组件：

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

Answer 1

让我们分析该错误的含义：

无法读取未定义的属性“ 0”

这意味着我们正在某个地方做something[0]，而something是undefined。您已经确定了发生这种情况的行：

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

此处某物为items。那么items是哪里来的呢？看起来像组件的道具：

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

那么items道具中传递了什么？您的MainGame组件：

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

啊哈！它没有通过items道具。这意味着它将是undefined。

Answer 2

我解决了这个问题。当调用主游戏中的游戏板组件时，我忘记添加价值道具，而我在其中定义了错误的情况。

我也忘记了在handleclick函数中编写事件。

tabplot Domain_Type when [fw=time_], percent(when) separate(Domain_Type) showval xtitle("")

在修复了这些问题之后，我将正确的道具添加到了Board组件中，问题得以解决。

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

Answer 3

您可以通过确保items数组实际包含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>

已解决/React.js TypeError：无法读取未定义[井字]的属性“ 0”

3 个答案: