我的 React Native Expo 应用程序中的无限循环在哪里？

Question

In my app, I made my own checkboxes. There are two styles available: multi choices or single choice. If the option if on a single choice, only one checkbox can be activated at the time.

When I click on a checkbox of the single kind (multi == false), the app throws me an error

"Invariant Violation: Too many re-renders".

I don't see where I would have an infinite loop in my code...

Here is an example of my code :

import React, { useState, useEffect } from "react";
import { View, SafeAreaView, Text, ScrollView, StyleSheet } from "react-native";
import { generalStyles } from "@gym-app/styles/general";
import { useTranslation } from "react-i18next";
import persistent from "@gym-app/database/persistent";
import CheckboxRow from "../../components/workout/exercises/filters/CheckboxRow";
import tdb from "@gym-app/translation/object";
import Checkbox from "../../components/workout/exercises/filters/Checkbox";

export default function ExercisesFilterScreen() {
  const { t } = useTranslation();
  const [equipments, setEquipments] = useState({});
  const [selectedEquipments, setSelectedEquipments] = useState({});
  const [order, setOrder] = useState("");
  if (Object.values(equipments).length == 0) {
    persistent.transaction(tx => {
      tx.executeSql(
        "SELECT * FROM equipment",
        [],
        (t, s) => {
          setEquipments(s.rows._array);
        },
        (t, e) => {
          console.log(e);
        }
      );
    });
  }

  useEffect(() => {
    alert(order);
  });

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <ScrollView
        style={[
          generalStyles.contentContainer,
          { flex: 1, backgroundColor: "#ffb623" }
        ]}
      >
        <Text
          style={{
            fontSize: 30,
            fontWeight: "bold",
            color: "#ffffff",
            textAlign: "center"
          }}
        >
          {t("general.filters").toUpperCase()}
        </Text>
        <View style={{ marginTop: 10 }}>
          <Text style={styles.optionTitle}>
            {t("exercise.availableEquipment").toUpperCase()}
          </Text>
          {Object.values(equipments).map(equipment => {
            return (
              <CheckboxRow
                key={equipment.id}
                selected={selectedEquipments}
                select={setSelectedEquipments}
                multi={true}
                id={equipment.id}
              >
                {tdb(equipment, "name")}
              </CheckboxRow>
            );
          })}
          <Text style={styles.optionTitle}>
            {t("exercise.order").toUpperCase()}
          </Text>
          <CheckboxRow
            selected={order}
            select={setOrder}
            multi={false}
            id="asc"
          >
            {t("exercise.easyToHard")}
          </CheckboxRow>
          <CheckboxRow
            selected={order}
            select={setOrder}
            multi={false}
            id="desc"
          >
            {t("exercise.hardToEasy")}
          </CheckboxRow>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  optionTitle: {
    marginBottom: 6,
    fontSize: 24,
    fontWeight: "bold",
    color: "#ffffff",
    textAlign: "left"
  }
});

Here is the CheckboxRow code:

import React, { useState } from "react";
import { TouchableOpacity, Text, StyleSheet } from "react-native";
import Checkbox from "./Checkbox";

export default function CheckboxRow(props) {
  const [checked, setChecked] = useState(false);

  if (props.multi == false) {
    if (props.selected == props.id) {
      setChecked(false);
    }
  }

  return (
    <TouchableOpacity
      style={styles.row}
      onPress={() => {
        var id = props.id;
        var selected = props.selected;
        var s = selected;
        if (props.multi == true) {
          if (s[id] == undefined) {
            s[id] = id;
          } else {
            delete s[id];
          }
        } else {
          if (s == id) {
            s = undefined;
          } else {
            s = id;
          }
        }
        props.select(s);
        console.log(props.select);
        setChecked(!checked);
      }}
    >
      <Checkbox checked={checked} />
      <Text style={styles.rowText}>{props.children}</Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  row: {
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 10
  },
  rowText: {
    fontSize: 26,
    color: "white",
    marginLeft: 6,
    fontWeight: "700"
  }
});

Answer 1

You should not call any async method inside render scope I think this is because of 2 reasons. either your sql query is running on each render or checkbox updating state. make sure your sql query dont run again and again if equipments are empty.

import React, { useState, useEffect } from "react";
import { View, SafeAreaView, Text, ScrollView, StyleSheet } from "react-native";
import { generalStyles } from "@gym-app/styles/general";
import { useTranslation } from "react-i18next";
import persistent from "@gym-app/database/persistent";
import CheckboxRow from "../../components/workout/exercises/filters/CheckboxRow";
import tdb from "@gym-app/translation/object";
import Checkbox from "../../components/workout/exercises/filters/Checkbox";

export default function ExercisesFilterScreen() {
  const { t } = useTranslation();
  const [equipments, setEquipments] = useState({});
  const [selectedEquipments, setSelectedEquipments] = useState({});
  const [order, setOrder] = useState("");

 //use useeffect for side effects
useEffect(()=> {
 if (Object.values(equipments).length == 0) {
    persistent.transaction(tx => {
      tx.executeSql(
        "SELECT * FROM equipment",
        [],
        (t, s) => {
          setEquipments(s.rows._array);
        },
        (t, e) => {
          console.log(e);
        }
      );
    });
  }

},[equipments])

  useEffect(() => {
    alert(order);
  });

  return (
    <SafeAreaView style={{ flex: 1 }}>
     ...
    </SafeAreaView>
  );
}

Also in checkbox component you can use useEffect for updating state

export default function CheckboxRow(props) {
  const [checked, setChecked] = useState(false);

  useEffect(()=>{
  if (props.multi == false) {
    if (props.selected == props.id) {
      setChecked(false);
    }
  }
 },[props.multi, props.selected])

  return (
    <TouchableOpacity>
   ...
    </TouchableOpacity>
  );
}

and finally check your dependencies to useEffect hook accordingly