Фотографии перезагружаются при вызове useEffect в React

Question

У меня есть 5 фотографий (GIFS), взятых из базы данных в случайном порядке. У меня есть состояние PressGif, которое определяет индекс фотографии нажал. Я хочу добавить событие onclick для каждого из них (в течение для l oop):

export default function GameObject(props) {
  const addedToGameGif = [];
  const PhotoCards = [];

  const [pressedGif, gifPressed] = useState(-1);

  useEffect(() => {
    console.log('HELLO');
  }, []);

  // get random photos to addedToGameGif array
  // ...

  for (let i = 0; i < addedToGameGif.length; i += 1) {
     PhotoCards.push(
      <div>
        <Card
          id={i}
          onClick={() => gifPressed(i)}>
          <img src={addedToGameGif[i]} />
        </Card>
      </div>,
    );
  }
  return <div>{PhotoCards}</div>;
 }

Я успешно получаю сообщение HELLO в консоли, но проблема в том, что мои случайно выбранные фотографии также меняются на другие , Так как же предотвратить перезагрузку той фотографии и вызов функции, которая выбирает фотографии случайным образом?

Answer 1

Я бы порекомендовал что-то вроде этого:

import React from 'react';

const PhotoCard = props => {
  const [addedToGameGif, setAddedToGameGif] = React.useState([]);
  const [pressedGif, setPressedGif] = React.useState(-1);
  // set random pictures
  React.useEffect(() => {
    const setRandomGifs = () => {
      let randomGifs = [];
      // make request to get random gifs
      // some loop () {
      // randomGifs.push(randomGif);
      // }
      setAddedToGameGif(randomGifs);
    };
    setRandomGifs();
  }, []);
  return (
    <>
      {addedToGameGif.map((gif, index) => {
        return (
          <Card
            id={index}
            onClick={() => setPressedGif(index)}
            key={'photo-card-' + index}
          >
            <img src={gif[index]} alt={'card-img' + index} />
          </Card>
        );
      })}
    </>
  );
};

export default PhotoCard;

Если это не сработает, проверьте, не слишком ли часто ваш компонент меняет свои реквизиты от родителя, чтобы каждый раз вызывать useEffect-Hook случается.