Question

 function ReservationScreens({ navigation }) {
  const [switchValue, setSwitch] = useState(false);
  const [loading, isLoading] = useState(true);
  const [data] = useState([data]);

  return (
    <SafeAreaView
      style={{
        flex: 1,
        paddingTop: Platform.OS === "android" ? 30 : 0,
      }}
    >
      <View style={styles.top}>
        <Text style={styles.text_picker}>El Mirador</Text>
        <View></View>
        <View style={styles.top_buttons}>
          <TouchableOpacity>
            <Feather name="calendar" size={25} />
          </TouchableOpacity>

          <TouchableOpacity style={{ marginLeft: 25 }} >
            <Feather name="settings" size={25} />
          </TouchableOpacity>
        </View>
      </View>

      <View style={styles.subTop}>
        <Text style={styles.date_text}>{getCurrentDate()}</Text>
        <Switch
          style={styles.switcher}
          onValueChange={() => setSwitch(true)}
          value={switchValue}
        />
      </View>


      <View style={styles.midTop}>
        <Text>Sala</Text>
        <Text>Torn</Text>
      </View>

      <View style={{}}>
        {isLoading(true) ? (
          <ActivityIndicator style={{ marginTop: 100 }} size="large" />
        ) : (
          <FlatList
            data={data}
            style={{ marginTop: 10, borderRadius: 25 }}
            keyExtractor={(item, index) => index.toString()}
            renderItem={({ item }) => (
              <View style={styles.books}>
                <View>
                  <Text style={styles.book_hour_text}>Hora de reserva</Text>
                  <Text style={styles.name_text}>{item.name}</Text>
                </View>
                <View style={{ marginStart: 15 }}>
                  <Text style={styles.phone_text}>{item.telephone}</Text>
                  <Text
                    style={{
                      fontSize: 14,
                      marginStart: 10,
                      color: "#393b44",
                    }}
                  >
                    {item.num_people} personas
                  </Text>
                </View>
                <TouchableOpacity style={{ marginTop: 20, marginStart: 15 }}>
                  <Feather name="chevron-down" size={25} />
                </TouchableOpacity>

                <View
                  style={{
                    borderWidth: 0.2,
                    flex: 1,
                    marginTop: 20,
                    marginBottom: 20,
                    marginEnd: 5,
                  }}
                ></View>
              </View>
            )}
          />
        )}
      </View>

  
    </SafeAreaView>
  );
}

它引发错误： 错误：重新渲染次数过多。 React限制了渲染次数以防止无限循环

我不知道错误在哪里，因为该错误以前曾起作用，我认为问题出在各州，但我不知道在哪里，请有人可以帮助我吗？ There's the full error code image

Answer 1

将此视为无限循环。您的dom被无限渲染。您的代码中有些东西会一次又一次地设置状态。

我认为错误在于此语句，因为您一次又一次将状态重置为true，从而导致无限循环：

isLoading(true) ? (

也要更改

loading === true ? (

OR

loading ? (

错误：重新渲染过多。 React限制了渲染次数以防止无限循环React Native

1 个答案: