时间戳

首页 > 解决方案 > React Native Case 语句、If 语句或基于值的条件渲染

javascript - React Native Case 语句、If 语句或基于值的条件渲染

问题描述

我正在尝试根据从 Firestore 获得的用户帐户 XP 创建排名级别。因此，例如，如果用户有 3000XP，他将是 3 级。

我认为最好的情况是构建一个包含所有可能值的长 if 语句，例如：

if (CurrentAccountXP == '1000') {
return 1
} else if (CurrentAccountXP == '2000') {
return 2
}

等等等等

根据 Tarik 的回应尝试的解决方案

const CurrentAccountXP = userData.accountXP;

const levels = [
0, 1250, 2500, 3750, 5000, 6250, 7500, 8750, 10000, 11250, 12500, 13750,
15000, 16250, 17500, 18750, 20000, 21250, 22500, 23750, 25000, 26250, 27500,
28750, 30000, 31250, 32500, 33750, 35000, 36250, 37500, 38750, 40000, 41250,
42500, 43750, 45000, 46250, 47500, 48750, 50000, 51250, 52500, 53750, 55000,
56250, 57500, 58750, 60000, 61250, 62500, 63750, 65000, 66250, 67500, 68750,
70000, 71250, 72500, 73750, 75000,
];

let level = 0;
const experience = CurrentAccountXP;

levels.forEach((v, i) => {
if (experience >= v) {
  level = i + 1;
}
console.log(level);
});

提取当前帐户经验点的代码

const [userData, setUserData] = useState({});
const user = auth.currentUser;

const GetUserData = async () => {
const response = firestore.collection("users").doc(user.uid);
const observer = response.onSnapshot(
  (docSnapshot) => {
    if (docSnapshot.exists) {
      setUserData(docSnapshot.data());
      //console.log("User Data Fetched: ", userData);
    }
  },
  (err) => {
    console.log(`Encountered error: ${err}`);
  }
);
const unsub = firestore.collection("users").onSnapshot(() => {});
  return () => unsub;
};

useEffect(() => {
  GetUserData();
}, []);

标签： javascriptreact-nativeif-statement

解决方案

确保将 XP 保存为数字。那么你的 if statemtn 可能是这样的：

if (CurrentAccountXP >= 1000 && < 2000) {
return 1
} else if (CurrentAccountXP >= 2000 && < 3000) {
return 2
}

这样，如果 XP 介于两者之间，您也可以捕获它们。如果您创建一个级别数组以及最小和最大 XP，您可以使用“更智能”的函数来概括它，该函数循环通过级别并检查 XP 以获得正确的级别。

推荐阅读