Блог

я получаю ошибку при запуске моего родного приложения react на выставке , моя ошибка-слишком много рендеров, react ограничивает количество рендеров, чтобы предотвратить бесконечный цикл, не знаю , где я ошибаюсь, пожалуйста, попробуйте исправить мою ошибку. если у вас есть какие-либо вопросы, пожалуйста, не стесняйтесь задавать их в любое время.

Home.js

Это тот самый home.js файл, в котором я написал весь свой код, включая css.

 import React, { useEffect, useState } from 'react'
import { Text, View, FlatList, StyleSheet, ScrollView, Image } from 'react-native';
import { Avatar } from 'react-native-elements';
import { Searchbar, shadow, Modal, Provider, Portal } from 'react-native-paper';
import { AntDesign } from '@expo/vector-icons';

export default function Home() {

  const [searchquery, setSearchquery] = React.useState();
  const [visible, setVisible] = React.useState(false);

  const showModal = setVisible(true);
  const hideModal = setVisible(false);
  const containerStyle = { backgroundColor: 'white', padding: 20 };

  const [users, setUser] = useState([
    {
      id: 1,
      name: "Ashish Nirvikar"
    },
    {
      id: 2,
      name: "Drew Macntyre"
    },
    {
      id: 3,
      name: "Jonh Cena"
    },
    {
      id: 4,
      name: "Rock Samoa"
    },
    {
      id: 5,
      name: "Boby Lashely"
    },
  ])

  return (
    <View >
      <Searchbar
        placeholder="Search Contacts"
        onChangeText={(query) => setSearchquery(query)}
        value={searchquery}
        style={{ marginTop: 30, marginHorizontal: 10 }}
      />
      <ScrollView>
        {
          users.map((item, index) => {
            return (
              <View key={index}>
                <Text style={styles.names}>{item.name}</Text>
              </View>
            )
          })
        }
      </ScrollView>
      <Provider>
        <Portal>
          <Modal visible={visible} onDismiss={hideModal} contentContainerStyle={containerStyle}>
            <Text>Example Modal.  Click outside this area to dismiss.</Text>
          </Modal>
        </Portal>
        <AntDesign name="plus" size={34} color="black" style={styles.plus} onPress={showModal} />
      </Provider>
    </View>
  );
}


const styles = StyleSheet.create({
  customText: {
    padding: 10,
    marginTop: 20,
    textAlign: 'center',
    backgroundColor: 'lightgray',
    fontWeight: 'bold',
    fontSize: 20
  },
  plus: {
    fontSize: 50,
    position: 'absolute',
    top: 680,
    right: 40,
    backgroundColor: 'pink',
    borderRadius: 15,
    borderWidth: 0.5,
    padding: 5,
  },
  names: {
    padding: 15,
    fontSize: 25,
    fontWeight: 'bold',
    backgroundColor: 'lightgray',
    marginTop: 10,
    borderRadius: 20,
    color: 'black'
  }
});
 

showModal И hideModal являются функциями, определите это как функцию.

 const showModal = () => setVisible(true);
const hideModal = () => setVisible(false);