javascript - react native |在 React-Native 中生成一个不重复的(名称)生成器

Question

大家好!

我有一个问题希望你能帮我解答。 我刚刚开始使用 React Native，正在开发一个简单的名称生成器。

我有一个具有不同名称的数组。 当我点击按钮时，会生成一个随机数。该数字与数组的名称列表相关联。

这一切都有效，但我得到了重复的名称。我想浏览整个列表，不要有重复的名字。当所有名称都通过后，列表将重新开始。

我正在考虑制作一个单独的数组来跟踪已经通过的数字。然后排除这些数字。但我不确定如何添加它以及这是否是正确的方法。

请参阅下面我的代码。 如果这有点困惑或麻烦，我们深表歉意。

import React, { useState } from "react";
import { StyleSheet, Text, View, Button } from "react-native";

export default function GirlScreen() {
  const RandomNumber = (min, max) => {
    return Math.floor(Math.random() * (max - min + 1) + min);
  };

  const [count, setCount] = useState(0);
  const onPress = () => {
    setCount(RandomNumber(1, 100));
  };

  const random = RandomNumber(1, 5);
  var differentNames = {
    namesContainer: {
      names: [
        { name: "(1) Sophie", id: 1 },
        { name: "(2) Emma", id: 2 },
        { name: "(3) Lisa", id: 3 },
        { name: "(4) Esmée", id: 4 },
        { name: "(5) Zoe", id: 5 },
      ],
    },
  };

  function findLinkByName(random) {
    for (const item of differentNames.namesContainer.names) {
      if (item.id === random) {
        return item.name;
      }
    }
  }

  return (
    <View style={styles.countContainer}>
      <Text style={styles.name}>{findLinkByName(random)}</Text>
      <Button onPress={onPress} title="Next Name" />
    </View>
  );
}

const styles = StyleSheet.create({
  countContainer: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  name: {
    color: "black",
    fontSize: 30,
  },
});

Answer 1

您可以跟踪两个状态。一个已保存 selectedNames，另一个仍保存 availableNames，如下所示。

  const [selectedNames, setSelectedNames] = useState([])
  const [availableNames, setAvailableNames] = useState([
        { name: "(1) Sophie", id: 1 },
        { name: "(2) Emma", id: 2 },
        { name: "(3) Lisa", id: 3 },
        { name: "(4) Esmée", id: 4 },
        { name: "(5) Zoe", id: 5 },
      ])

然后，我们在 0 和 avialableNames 的长度之间选择一个随机数，它代表我们要从 avialableNames 中选取的索引。

const random = RandomNumber(0, availableNames.length - 1);

然后，您的 onPress 函数如下所示。

const onPress = () => {
    setAvailableNames(availableNames.filter(n => n !== availableNames[random]))
    setSelectedNames([...selectedNames, availableNames[random]])  
};

我们将新随机选择的名称添加到 selectedNames 中，同时将其从 availableNames 中删除。

您的 findLinkByName 函数可能如下所示。

function findLinkByName(random) {
   
    if (availableNames.length === 0) {
      setAvailableNames(selectedNames.sort((a, b) => a.id - b.id))
      setSelectedNames([])
      return availableNames[0] 
    }
    return availableNames[random].name
 }

只要availableNames中有名称，即其长度不等于0，我们就选择它并返回它的名称。如果已选择所有可用名称，我们将重置状态，按 id 属性对 selectedNames 进行排序，并再次返回列表中的第一个名称。

这是一个工作 snack .