Question

我不知道为什么此屏幕会无限地重新渲染，该功能在上一页上起作用并且我将其复制了过来，但是现在没有任何一种情况起作用。这是我第一次使用仅来自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",
  },
});

Answer 1

您有点混合了创建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）

React Native中的重新渲染问题

1 个答案: