Блог

Итак, у меня есть проект по созданию ВОЕННОЙ карточной игры в react, игра простая — полная колода карт, равная 52 картам. 52 карты нужно разделить на 26 карт для игрока и компьютера.

игрок — это объект, который имеет свойства, например :

 {name:'Oded', wins:0, loses:0, gamenumber:0,deck:[]}
 

при запуске вам нужна главная страница «login», на которой пользователь вводит свое имя, нажимает кнопку «START» после того, как пользователь нажал кнопку, системе необходимо «разделить» полную колоду на 26 карт каждая. для проблемы с добавлением игрока я использовал эту функцию :

       let addPlayer=(name)=>{               //Sending the function to /Home to get the name of the new player 
    setPlayers([...players,{name: name, wins:'', loses:'', gamenumber:'',deck:[]}]) //Insert the new player into my array
  }
 

для разделения колоды карт я использовал эту функцию :

   let newPlayerDeck=[]
  let newaiPlayerDeck=[]
  let devideCards=()=>{
    for(let i=0;i<fullDeck.length-26;i  ){              //Getting two decks of 26 cards. 26 for ai 26 for player
    newPlayerDeck.push(fullDeck[i])
    setPlayers(players[0].deck=newPlayerDeck)
    }
    for(let i=26;i<fullDeck.length;i  ){
    newaiPlayerDeck.push(fullDeck[i])
    setAiPlayer(aiPlayer[0].deck=newaiPlayerDeck)
  }
    
  }
 

Но это не работает.. система добавляет колоду только первому игроку, в данном случае Oded (и переопределяет свойства)
Я попытался переключить 0 на 1 для индекса setAiPlayer и setPlayers, перепробовал так много вещей, чего мне не хватает?
моя цель — получить объект игрока с колодой после нажатия кнопки «ПУСК». спасибо, ребята!

мой полный компонент приложения :

 import React, {useState} from 'react'
import { BrowserRouter as Router, Switch, Route} from "react-router-dom";
import Home from './Home';
import '../app.css'


function App() {

      const [fullDeck, setFullDeck] = useState([        //Full deck cards 52 cards
        4,4,13,1,2,12,3,12,3,5,11,3,13,13,8,10,
        10,3,5,11,11,6,5,6,1,7,2,7,6,8,9,8,                //13
        7,12,7,9,9,1,10,4,2,11,6,4,                
        12,10,9,1,5,2,13,8])


      const [players,setPlayers] = useState([                         //player properties, all my players
        {name:'Oded', wins:0, loses:0, gamenumber:0,deck:[]},
        
      ])
      const [aiPlayer,setAiPlayer] = useState([         //The computer player you play against.
        {name:'Computer', deck:[]}
      ])

      let addPlayer=(name)=>{               //Sending the function to /Home to get the name of the new player 
        setPlayers([...players,{name: name, wins:'', loses:'', gamenumber:'',deck:[]}]) //Insert the new player into my array
      }
      console.log(players)


      let newPlayerDeck=[]
      let newaiPlayerDeck=[]
      let devideCards=()=>{
        for(let i=0;i<fullDeck.length-26;i  ){              //Getting two decks of 26 cards. 26 for ai 26 for player
        newPlayerDeck.push(fullDeck[i])
        setPlayers(players[0].deck=newPlayerDeck)
        }
        for(let i=26;i<fullDeck.length;i  ){
        newaiPlayerDeck.push(fullDeck[i])
        setAiPlayer(aiPlayer[0].deck=newaiPlayerDeck)
      }
        
      }
      
       

Способ установки состояния неверен:

     setPlayers(players[0].deck=newPlayerDeck)
 

     setAiPlayer(aiPlayer[0].deck=newaiPlayerDeck)
 

Вот как вы должны это делать:

       const temp = [...players];
      temp[0].deck = newPlayerDeck;
      setPlayers(temp);
 

В принципе, когда вы хотите изменить состояние массива, вы не должны изменять массив напрямую (например, используйте players.push() или players[0] = something ). Вы должны клонировать его, изменить клон (в моем примере я использовал temp), затем использовать функцию set (setPlayers) для обновления клона до состояния.
Продолжайте усердно работать, вы добьетесь своего!