代码之家 › 专栏 › 技术社区 › Ollie Lynas

循环浏览列表中的选项时,仅显示最后一个选项(显示两次)和倒数第二个选项(react native JS)

react-native javascript

Ollie Lynas · 技术社区 · 3 年前

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  = () =>  {
  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);
}

1 回复 | 直到 3 年前

wxker 3 年前

index 应该是有状态的,而不是 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]);

无论你在哪里使用 游戏文本 ,你可以用 gamesList[index] 相反

推荐文章

user19476497 · 如何使用useState修改数组以使其成为React中的常数

2 年前

Muhammad Ashraf · 反应:过滤从具有特定键的对象数组中获取值,并将结果分组到数组中

2 年前

John · 如何确定Javascript自引用循环是否完成[重复]

2 年前

Herc · 将用户信息添加到firebase(注册)react native

2 年前

Bonhart · 有没有更好的方法按名称查找数组中的特定对象?

2 年前

ubermo · 如何在React本机自定义组件中使用状态?

2 年前

ramanujans alkhazarim · 错误“元素类型无效”React Native

2 年前

Audrey K · 有没有办法降级React Native?

2 年前

user15137953 · 已求解的对象作为React子对象无效。如果要渲染子级集合,请改用数组。反应

2 年前

Tedi · 如何将单个数据从子组件传递到父组件?

2 年前