Блог

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

Я столкнулся с некоторыми трудностями при попытке создать список покемонов из-за того, что данные, хранящиеся в массиве, по-видимому, исчезают (я новичок в React, и поэтому я уверен, что я что-то упускаю).

В моем игровом компоненте у меня определено следующее состояние:

 const [score, setScore] = useState(0);
const [highScore, setHighScore] = useState(0);
const [level, setLevel] = useState(1);
const [cards, setCards] = useState(4);
const [gameActive, setGameActive] = useState(false);
const [pokemonArray, setPokemonArray] = useState([]);
const [activePokemon, setActivePokemon] = useState([]);
 

Мое приложение сначала генерирует целые числа массива, которые соответствуют типу Pokemon (их 151) для отображения:

     const generatePokemonArray = (cards) => {

        const generatedPokemonArray = [];
       
        for (let i = 0; i<cards; i  ) {
            generatedPokemonArray.push(Math.floor(Math.random() * (150 - 0)   0));
        }

        setPokemonArray({
            pokemonArray: generatedPokemonArray
        });
    }
 

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

     const generateActivePokemon = (pokemonArray, listOfPokemon) => {
        const pokemonNames = [];

        for (let i=0; i<pokemonArray.length; i  ) {
            pokemonNames.push(listOfPokemon[pokemonArray[i]].name);
        }

        setActivePokemon({
            activePokemon: pokemonNames
        });
    }
 

Проблема, с которой я сталкиваюсь, связана с приведенным выше блоком кода, цикл for никогда не запускается. Если я введу некоторые журналы консоли, будет выведено следующее:

     const generateActivePokemon = (pokemonArray, listOfPokemon) => {
        const pokemonNames = [];

        console.log(pokemonArray);
        console.log(pokemonArray[0]);

        for (let i=0; i<pokemonArray.length; i  ) {
            pokemonNames.push(listOfPokemon[pokemonArray[i]].name);
        }

        setActivePokemon({
            activePokemon: pokemonNames
        });
    }
 

Я уже некоторое время хожу по кругу, пытаясь понять, что здесь происходит, но мне не повезло, и я был бы очень благодарен за любые предложения.

Спасибо!

вы передаете объект pokemonArray , у которого есть pokemonArray ключ. Если вы сначала его разрушите, вы бы извлекли массив, и он должен работать:

 const generateActivePokemon = ({ pokemonArray }, listOfPokemon) => {
    const pokemonNames = [];

    for (let i=0; i<pokemonArray.length; i  ) {
        pokemonNames.push(listOfPokemon[pokemonArray[i]].name);
    }

    setActivePokemon({
        activePokemon: pokemonNames
    });
}
 

хотя причина, по которой у вас есть объект, заключается в том, что вы превращаете состояние массива в объект:

     setPokemonArray({
        pokemonArray: generatedPokemonArray
    });
 

где это должно быть похоже:

     setPokemonArray([generatedPokemonArray]);
 

и это тоже похоже на тот же случай activePokemon . Начальное состояние массива превратилось в объект.

в целом, правильный подход заключается в том, что вы должны исправить свой код, чтобы он работал, чтобы установить ваши состояния как массив:

 const generatePokemonArray = (cards) => {

    const generatedPokemonArray = [];
   
    for (let i = 0; i<cards; i  ) {
        generatedPokemonArray.push(Math.floor(Math.random() * (150 - 0)   0));
    }

    // pass an array
    setPokemonArray([generatedPokemonArray]);
}
 

 const generateActivePokemon = (pokemonArray, listOfPokemon) => {
    const pokemonNames = [];

    console.log(pokemonArray);
    console.log(pokemonArray[0]);

    for (let i=0; i<pokemonArray.length; i  ) {
        pokemonNames.push(listOfPokemon[pokemonArray[i]].name);
    }

    // pass an array
    setActivePokemon([pokemonNames]);
}