Блог

Главная - Вопросы по программированию - При циклическом переборе опций в списке отображаются только последние опции (отображаются дважды) и предпоследние опции (react native JS).

При циклическом переборе опций в списке отображаются только последние опции (отображаются дважды) и предпоследние опции (react native JS).

#javascript #react-native

#язык JavaScript #реагировать-родной

Вопрос:

Я пытаюсь перебирать параметры в списке , используя левую и правую кнопки, которые вызывают функции cycleLeft() и cycleRight() , но вместо этого я получаю только предпоследний параметр, отображаемый дважды подряд, а затем последний параметр, отображаемый один раз. это для нативного приложения react внутри основной функции приложения. любая помощь будет признательна.

 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 = () =gt; {  index = index - 1;  if (index lt; 0) { index = gamesList.length - 1; };  game = gamesList[index];  setGameText(gamesList[index]);  console.log(game   " "   index); }  const cycleRight = () =gt; {  index = index   1;  if (index gt; gamesList.length - 1) { index = 0; };  game = gamesList[index];  setGameText(gamesList[index]);  console.log(game   " "   index); }

Журнал консоли

Комментарии:

1. Я думаю, что нам не хватает той части кода, в которой мы вызываем функции cycleLeft и. cycleRight

2. lt;Pressable onPress={cycleLeft}gt;lt;Text style={{ fontSize: 50}}gt;{"lt;"}lt;/Textgt;lt;/Pressablegt;

3. Возможно setGameText , изменяет gameList и/или index ?

Ответ №1:

index должно быть с учетом состояния, а не gameText 

 var gamesList = ["Quadratic", "Magic Square", "Settings", "Option 3"]; const [index, setIndex] = useState(0);  const cycleLeft = () =gt; {  setIndex(prevIndex =gt; prevIndex - 1 lt; 0 ? gamesList.length - 1 : prevIndex - 1); }  const cycleRight = () =gt; {  setIndex(prevIndex =gt; prevIndex   1 gt; gamesList.length - 1 ? 0 : prevIndex   1); }  //just for logging useEffect(() =gt; {  console.log(gamesList[index]  " "   index); }, [index]);

Где бы вы ни использовали gameText , вы можете просто использовать gamesList[index] вместо этого.

Метки: