渲染过多。 React 限制渲染次数以防止无限循环

Question

在 expo 中运行我的 react native 应用程序时出现错误，我的错误是渲染次数过多，react 限制了渲染次数以防止无限循环，不知道哪里错了，请尝试修复我的错误。如果您有任何问题，请随时询问 ant time。

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'
  }
});

Answer 1

showModal 和 hideModal 是函数，将其定义为函数。

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