J'essaie de parcourir les options d'une liste à l'aide des boutons gauche et droit qui appellent les fonctions cycleLeft() et cycleRight(), mais à la place, tout ce que j'obtiens est l'avant-dernière option affichée deux fois de suite, puis le dernière option affichée une fois. il s'agit d'une application native de réaction dans la fonction principale de l'application. toute aide est appréciée.

var gamesList = ["Quadratic", "Magic Square", "Settings", "Option 3"];
var index = 0;
var game = gamesList[index];

const [gameText, setGameText] = useState(gamesList[index]);
const [gameGame, setGameGame] = useState(gamesList[index]);
const zAnim = useRef(new Animated.ValueXY({ x: 0, y: 1000 })).current;

const cycleLeft  = () =>  {
  index = index - 1;
  if (index < 0) { index = gamesList.length - 1; };
  game = gamesList[index];
  setGameText(gamesList[index]);
  console.log(game + " " + index);
}

const cycleRight = () => {
  index = index + 1;
  if (index > gamesList.length - 1) { index = 0; };
  game = gamesList[index];
  setGameText(gamesList[index]);
  console.log(game + " " + index);
}

Console Log

0
Ollie Lynas 28 nov. 2021 à 05:11
1
Je pense qu'il nous manque la partie du code où nous appelons les fonctions cycleLeft et cycleRight.
 – 
Antonio
28 nov. 2021 à 05:21
<Pressable onPress={cycleLeft}><Text style={{ fontSize: 50}}>{"<"}</Text></Pressable>
 – 
Ollie Lynas
28 nov. 2021 à 05:23
1
Peut-être que setGameText modifie gameList et/ou index ?
 – 
Antonio
28 nov. 2021 à 05:28

1 réponse

Meilleure réponse

index devrait être avec état au lieu de gameText

var gamesList = ["Quadratic", "Magic Square", "Settings", "Option 3"];
const [index, setIndex] = useState(0);

const cycleLeft  = () =>  {
  setIndex(prevIndex => prevIndex - 1 < 0 ? gamesList.length - 1 : prevIndex - 1);
}

const cycleRight = () => {
  setIndex(prevIndex => prevIndex + 1 > gamesList.length - 1 ? 0 : prevIndex + 1);
}

//just for logging
useEffect(() => {
  console.log(gamesList[index]+ " " + index);
}, [index]);

Où que vous utilisiez gameText, vous pouvez simplement utiliser gamesList[index] à la place.

1
wxker 28 nov. 2021 à 05:24