使用 react 构建简单的井字游戏时出现错误“未捕获类型错误:无法读取未定义的属性(读取‘值’)”

问题描述 投票:0回答:1

我正在尝试创建一个数组来存储每次单击时 square 的值。然后我可以使用该数组来实现游戏逻辑。但每次我点击正方形时,它都会重新渲染并显示错误的空白页面

TypeError: Cannot read properties of undefined (reading 'value')

import React, { useState } from "react";

const App = () => {
  const [turn, setTurn] = useState(false);
    const [square, setSquare] = useState(Array(9).fill({value: null, isClick: false}))

  return (
    <div>
      <h1>Turn: {turn ? "O" : "X"}</h1>
      <div className="board-row">
        <Square turn={turn} setTurn={setTurn} square={square[0]} setSquare={setSquare} />
        <Square turn={turn} setTurn={setTurn} square={square[1]} setSquare={setSquare} />
        <Square turn={turn} setTurn={setTurn} square={square[2]} setSquare={setSquare} />
      </div>
      <div className="board-row">
        <Square turn={turn} setTurn={setTurn} square={square[3]} setSquare={setSquare} />
        <Square turn={turn} setTurn={setTurn} square={square[4]} setSquare={setSquare} />
        <Square turn={turn} setTurn={setTurn} square={square[5]} setSquare={setSquare} />
      </div>
      <div className="board-row">
        <Square turn={turn} setTurn={setTurn} square={square[6]} setSquare={setSquare} />
        <Square turn={turn} setTurn={setTurn} square={square[7]} setSquare={setSquare} />
        <Square turn={turn} setTurn={setTurn} square={square[8]} setSquare={setSquare} />
      </div>
    </div>
  );
};

export default App;

const Square = ({ turn, setTurn, square, setSquare }) => {
    
  const clickHandle = () => {
    if (!square.isClick) {
      setSquare({value: turn ? "O" : "X", isClick: true})
      setTurn(!turn);
    }
};

  return (
    <div>
      <button className="square" onClick={clickHandle}>
        {square.value}
      </button>
    </div>
  );
};

我尝试通过 console.log 进行调试,但不知为何

square
状态未定义。

reactjs react-hooks
1个回答
0
投票

当你设置状态时,你将它设置为单个对象,这是错误的,因为你最初采用的是一个数组,所以它应该是一个对象数组,你只需要更新你点击的那个特定对象。

CODESANDBOX

const clickHandle = () => {
    if (!square.isClick) {
      setSquare((oldValues) => {
        return oldValues.map((o, i) => {
          return i === index
            ? {
                ...o,
                value: turn ? "O" : "X",
                isClick: true
              }
            : o;
        });
      });
      setTurn(!turn);
    }
© www.soinside.com 2019 - 2024. All rights reserved.