Javascript 如何呈现'；X'；s和'；O'；在他们的右边方格里有谁在玩井字游戏？（反应）

我正在创建一个Tic-Tac-Toe游戏，我设置了一个对象数组

玩家

作为一个状态，数组中的每个对象都包含一个

id

代表点击方块的id，玩家是“X”或“O”，但我无法在相应的方块上渲染它们，如何使用该对象数组将字母放置在正确的位置

  const Game = () => {
        //example [{id: 5, player: 'X'}, {id: 0, player; 'O'}]
        const [players, setPlayers] = useState([]);
        const [player, setPlayer] = useState('X')
        const [picks, setPicks] = useState([])

        const handleSquareClick = (id) => {
           !picks.includes(id) && setPicks([...picks, id])
            player === 'X' ? setPlayer('O') : setPlayer('X');
            setPlayers(players => [...players, { id, player }]) 
        }

        return (
            <div class="game">
                <ul class="squares">
                    {
                        [...Array(9)].map((_, idx) => {
                            return (
                                <Square
                                    players={players}
                                    handleSquareClick={handleSquareClick}
                                    id={idx}
                                    picks={picks}
                                />
                            )
                        })
                    }
                </ul>
            </div>
        )
    }

    const Square = ({ players, handleSquareClick, id, picks }) => {

        return (
            <li
                className="square"
                onClick={() => handleSquareClick(id)}
            >
                {}
            </li>
        )
    }

const游戏=（）=>{
//示例[{id:5，播放器：'X'}，{id:0，播放器；'O'}]
const[players，setPlayers]=useState（[]）；
const[player，setPlayer]=useState（'X'）
常量[picks，setPicks]=useState（[]）
常量handleSquareClick=（id）=>{
！picks.includes（id）&&setPicks（[…picks，id]）
player=='X'？setPlayer（'O'）：setPlayer（'X'）；
setPlayers（players=>[…players，{id，player}]）
}
返回(

{
[…数组（9）].map（（\ux，idx）=>{
返回(
)
})
}

)
}
const Square=（{玩家、手控方形、id、拾取}）=>{
返回(
handlesqueleclick（id）}
>
{}

)
}

如果有人告诉我如何做，或者从一开始就告诉我什么是更好的方法（更好的逻辑），我将不胜感激

---

所以我看到了很多可以修复的东西

首先，我不确定玩家在代码中应该做什么（在我看来，这就像是一段精选历史），所以我没有删除它，但如果不需要，你可以删除它。在这段代码中，它不被使用（仅用于更新它）

现在，我将

picks

值更改为一个9的数组，其中每个元素都是一个字符串（等于

X

或

O

），元素的索引是单击的正方形的

id

。 所以，如果我点击第4格，我是玩家

X

，那么

选择[4]=“X”

现在我修好了另一件事。在检查拾取是否有效之前，您更改了当前的

播放器（使用
setPlayer
）。然后你可能会遇到这样的情况，一个玩家不应该选择一个方块，因为它已经被选中了，你没有更新方块，但是现在轮到另一个玩家了。所以，我把
player==“X”？setPlayer（“O”）：setPlayer（“X”）if（拾取[id]==null）
）

希望这对你有帮助，这是可以理解的

import React, { useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <Game />
    </div>
  );
}

const Game = () => {
  const [players, setPlayers] = useState([]);
  const [player, setPlayer] = useState("X");
  const [picks, setPicks] = useState(new Array(9).fill(null));

  const handleSquareClick = id => {
    setPlayers(players => [...players, { id, player }]);
    if (picks[id] === null) {
      let newArr = picks;
      newArr[id] = player;
      setPicks(newArr);
      player === "X" ? setPlayer("O") : setPlayer("X");
    }
  };

  return (
    <div class="game">
      <ul class="squares">
        {[...Array(9)].map((_, idx) => {
          return (
            <Square
              handleSquareClick={handleSquareClick}
              id={idx}
              squarePick={picks[idx]}
            />
          );
        })}
      </ul>
    </div>
  );
};

const Square = ({ handleSquareClick, id, squarePick }) => {
  return (
    <li className="square" onClick={() => handleSquareClick(id)}>
      {squarePick}
    </li>
  );
};