我不知道为什么此屏幕会无限地重新渲染,该功能在上一页上起作用并且我将其复制了过来,但是现在没有任何一种情况起作用。这是我第一次使用仅来自HTML中的Javascript的React Native,因此我还不太了解基本原理。
这与锻炼状态有关,但我不知道出了什么问题。
GeneratedWorkoutScreen.js
import React, { useState, useContext } from "react";
import { View, Text, StyleSheet, TouchableOpacity, Alert } from "react-native";
import data from "./../moves.json";
import GlobalSkillState from "./../contexts/GlobalSkillLevel";
import * as firebase from "firebase";
import Generate from "./../big_functions/generate";
import { render } from "react-dom";
import SkillLevel from "../big_functions/SkillLevel";
import { BaseRouter } from "@react-navigation/native";
import { getAppLoadingLifecycleEmitter } from "expo/build/launch/AppLoading";
export default class GeneratedWorkoutScreen extends React.Component {
Generated = () => {
const [workout, setWorkout] = useState("");
const [state, setState] = useContext(GlobalSkillState);
const shuffle = (arr) => {
var i, j, temp;
for (i = arr.length - 1; i > 0; i--) {
j = Math.floor(Math.random() * (i + 1));
temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
return arr;
};
const test = 0;
switch (test) {
case 0:
// // warm up
// const warmup =
// "\nWarm up \n\n" +
// data.moves.warmup[0] +
// " " +
// data.timeIntervals[5] +
// "\n" +
// data.moves.warmup[1] +
// " " +
// data.timeIntervals[10];
// // training 1
// const qwer1 = [0, 1, 2, 3];
// const qwer2 = shuffle(qwer1);
// const temp1 = [1, 1, 1, 1];
// const begRanNumber = temp1.map(
// (x) =>
// 10 * Math.floor(Math.random() * 1 + 1) +
// 5 * Math.floor(Math.random() * 4 + 0)
// );
// const temp3 = [0, 1, 2, 3];
// const simpBegWorkout = temp3.map(
// (x) => begRanNumber[x] + " " + data.moves.basic[qwer2[x]] + "\n"
// );
// // training 2
// const comboBegWorkout = data.moves.beginnerCombos.map(
// (x) =>
// "\n" +
// data.moves.beginnerCombos[
// Math.floor(Math.random() * data.moves.beginnerCombos.length + 0)
// ] +
// " 5 Minutes"
// );
// // render
// const workout =
// "\n\nWorkout \n\n" +
// simpBegWorkout[0] +
// simpBegWorkout[1] +
// simpBegWorkout[2] +
// simpBegWorkout[3] +
// comboBegWorkout[0];
// setWorkout(warmup + workout);
setWorkout("hello");
break;
case 1:
Alert.alert("intermediate");
setWorkout("");
break;
case 2:
Alert.alert("advanced");
setWorkout("");
break;
default:
Alert.alert("Please select your skill level" + workout);
break;
}
return (
<View style={styles.container}>
<Text style={styles.genList}>{workout}</Text>
</View>
);
};
render() {
return <this.Generated></this.Generated>;
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
genList: {
flex: 1,
justifyContent: "flex-start",
alignItems: "flex-start",
},
});
答案 0 :(得分:0)
您有点混合了创建React组件的两种方法,基于类和基于函数。我会出于不同的原因推荐最后一个。
现在,关于您的问题,这导致您的组件无限地重新渲染:
const test = 0;
switch (test) {
case 0:
// // warm up
// const warmup =
// "\nWarm up \n\n" +
// data.moves.warmup[0] +
// " " +
// data.timeIntervals[5] +
// "\n" +
// data.moves.warmup[1] +
// " " +
// data.timeIntervals[10];
// // training 1
// const qwer1 = [0, 1, 2, 3];
// const qwer2 = shuffle(qwer1);
// const temp1 = [1, 1, 1, 1];
// const begRanNumber = temp1.map(
// (x) =>
// 10 * Math.floor(Math.random() * 1 + 1) +
// 5 * Math.floor(Math.random() * 4 + 0)
// );
// const temp3 = [0, 1, 2, 3];
// const simpBegWorkout = temp3.map(
// (x) => begRanNumber[x] + " " + data.moves.basic[qwer2[x]] + "\n"
// );
// // training 2
// const comboBegWorkout = data.moves.beginnerCombos.map(
// (x) =>
// "\n" +
// data.moves.beginnerCombos[
// Math.floor(Math.random() * data.moves.beginnerCombos.length + 0)
// ] +
// " 5 Minutes"
// );
// // render
// const workout =
// "\n\nWorkout \n\n" +
// simpBegWorkout[0] +
// simpBegWorkout[1] +
// simpBegWorkout[2] +
// simpBegWorkout[3] +
// comboBegWorkout[0];
// setWorkout(warmup + workout);
setWorkout("hello");
break;
case 1:
Alert.alert("intermediate");
setWorkout("");
break;
case 2:
Alert.alert("advanced");
setWorkout("");
break;
default:
Alert.alert("Please select your skill level" + workout);
break;
}
由于Generated
是一个功能组件,因此无论何时出于任何原因重新渲染,都将再次执行上述代码,从而再次更新workout
的状态,依此类推...
如果您只想在特定情况下执行该代码,或者只在组件渲染时执行一次,请使用useEffect
(https://www.w3.org/TR/CSS21/visudet.html#root-height)