React native 当我尝试使用useState查看文本时，为什么会出现错误？

在添加此之前，所有代码都正常工作。但我只是想看看当我改变我的搜索文本输入时，它应该被添加到文本组件中。 但我得到一个错误，它说“太多的重新渲染，反应限制渲染的数量，以防止不定式循环”

我应该做什么改变才能得到这份工作

这是我的相关代码：

MainScreen.js

import React, { useState } from 'react';
import { StyleSheet, Text, View, SafeAreaView, TextInput, ScrollView, TouchableHighlight } from 'react-native';
import Application from "../icons/application.svg"
import HorizontalCircles from '../HorizontalCircles';
import HorizontalDiscussion from "../HorizontalDiscussion";
import Energy from "../icons/energy.svg"
import Add from "../icons/add.svg"
import Calendar from "../icons/calendar.svg"
import Clock from "../icons/clock.svg"


const MainScreen = ({ navigation }) => {

  const [text,setText] = useState("");
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.appIcon}>
        <Application height={30} width={22} fill={"#1E2439"} />
        <View style={{ height: 30, width: 30, backgroundColor: "#DBF1F9", borderRadius: 20 }} />
      </View>
      <TextInput style={styles.input} placeholder="Search" placeholderTextColor="#B9B9C5">{setText(text)}</TextInput>
      <Text>{text}</Text>
      <View style={{ height: 100 }}>
        <ScrollView showsHorizontalScrollIndicator={false} contentContainerStyle={{ marginVertical: 20, alignItems: "center" }} horizontal={true}>
          <View style={{ height: 40, width: 40, backgroundColor: "#FFFFFF", borderRadius: 20, marginRight: 10, borderStyle: "dotted", borderWidth: 5, borderColor: "#E2E2E2" }} />
          <HorizontalCircles color={"#CFC8FF"} />
          <HorizontalCircles color={"#FFA2BF"} />
          <HorizontalCircles color={"#FEE3AA"} />
          <HorizontalCircles color={"#FEDFCC"} />
          <HorizontalCircles color={"#FFA2BF"} />
          <HorizontalCircles color={"#F3A5FF"} />
          <HorizontalCircles color={"#EFBCFF"} />
          <HorizontalCircles color={"#AFBFCF"} />
          <HorizontalCircles color={"#AEDF5F"} />
          <HorizontalCircles color={"#DDB825"} />
        </ScrollView>
      </View>

      {/* Discussion Part */}
      <Text style={styles.blackText}>Group Discussion On Going</Text>

      <View style={{ height: 250 }}>
        <ScrollView horizontal={true} showsHorizontalScrollIndicator={false} contentContainerStyle={{ flexDirection: "row", alignItems: "center", }}>
          <HorizontalDiscussion color={"#FFF9F2"} />
          <HorizontalDiscussion color={"#E7FBFF"} />
        </ScrollView>
      </View>

      <Text style={styles.blackText}>Todays Task</Text>

      {/* Task Part */}
      <ScrollView style={{ height: 300 }}>
        <View style={{ padding: 30 }}>
          <View style={styles.task}>
            <View style={{ backgroundColor:"#FFEFE2", padding:10,borderRadius:13}}>
              <Energy height={35} width={25} fill={"#FB9238"} />
            </View>

            <View style={{ marginLeft: 15, flex: 1}}>
              <Text style={styles.blackText}>8 Tasks Today</Text>
              <Text style={styles.grayText}>Meet them & Share your experience</Text>
            </View>

            <View style={{ marginLeft: 5 }}>
              <Add height={35} width={25} fill={"#ABA8BA"} />

            </View>

          </View>

          <View style={styles.task}>
            <View style={{ backgroundColor: "#FEF8E6", padding: 10, borderRadius: 13 }}>
              <Calendar height={35} width={25} fill={"#FCC626"} />

            </View>

            <View style={{ marginLeft: 15, flex: 1 }}>
              <Text style={styles.blackText}>Event</Text>
              <Text style={styles.grayText}>Create & Share Event</Text>
            </View>

            <TouchableHighlight onPress={() => navigation.navigate("NewScreen")}>
              <View>
                <Add height={35} width={25} fill={"#ABA8BA"} />

              </View>
            </TouchableHighlight>      

          </View>

          <Text style={styles.blackText}>Proposed classes</Text>

          <View>
            <Text style={{ color:"#9993D3",fontSize:18}}>Math class</Text>
            <View style={styles.proposed}>
              <Text style={{ color:"#706E80",fontSize:20}}>Rasyid Hilman</Text>
              <View style={{ height: 35, width: 35, backgroundColor: "#FEE3AA", borderRadius: 25, marginHorizontal: 10, }} />

            </View>

            <View style={styles.proposed}>
              <View style={styles.agendaClockSvg}>
                <Calendar height={40} width={30} fill={"#D4D3DA"} />
                <Text style={{ color: "#B0AFB7", fontSize: 18, marginLeft: 10}}>August 16, 2021</Text>
              </View>

              <View style={styles.agendaClockSvg}>
                <Clock height={40} width={30} fill={"#C0BFC6"} />
                <Text style={{ color:"#AFAEB8", fontSize:18, marginLeft:10}}>15:00</Text>
              </View>
            </View>
          </View>
        </View>

      </ScrollView>

    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: "#FFFFFF",
  },
  appIcon: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  },
  input: {
    height: 40,
    borderWidth: .5,
    borderRadius: 10,
    marginVertical: 10,
    backgroundColor: "#F7F6F9",
    marginVertical: 20,
  },
  blackText: {
    fontSize: 20,
    fontWeight: "bold",
    fontFamily: "Times New Roman",
  },
  grayText: {
    color: "#A29E97",
    fontSize: 17,
  },
  task: {
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 15,
    justifyContent: "space-between"
  },
  proposed: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between"
  },
  agendaClockSvg: {
    flexDirection: "row", 
    alignItems: "center",
  }


});

export default MainScreen;

import React，{useState}来自“React”；
从“react native”导入{样式表、文本、视图、安全区域视图、文本输入、滚动视图、TouchableHighlight}；
从“./icons/Application.svg”导入应用程序
从“../HorizontalCircles”导入水平圆；
从“./水平讨论”导入水平讨论；
从“./icons/Energy.svg”导入能量
从“./icons/Add.svg”导入添加
从“./icons/Calendar.svg”导入日历
从“./icons/Clock.svg”导入时钟
常量主屏幕=（{navigation}）=>{
const[text，setText]=useState（“”）；
返回(
{setText（文本）}
{text}
{/*讨论部分*/}
小组讨论继续进行
今天的任务
{/*任务部分*/}
今天的8项任务
与他们见面并分享你的经验
事件
创建和共享事件
导航。导航（“新闻屏幕”）}>
拟议课程
数学课
拉西德·希尔曼
2021年8月16日
15:00
);
};
const styles=StyleSheet.create({
容器：{
弹性：1，
填充：20，
背景颜色：“FFFFFF”，
},
appIcon：{
flexDirection:“行”，
辩护内容：“间隔空间”，
对齐项目：“中心”，
},
输入：{
身高：40，
边框宽度：.5，
边界半径：10，
玛吉：10，
背景色：“F7F6F9”，
澳门时间:20,，
},
黑文：{
尺寸：20，
fontWeight：“粗体”，
fontFamily：“时代新罗马”，
},
灰色文本：{
颜色：“A29E97”，
尺寸：17，
},
任务：{
flexDirection:“行”，
对齐项目：“中心”，
marginBottom:15，
为内容辩护：“之间的空间”
},
提议：{
flexDirection:“行”，
对齐项目：“中心”，
为内容辩护：“之间的空间”
},
agendaClockSvg：{
flexDirection:“行”，
对齐项目：“中心”，
}
});
导出默认主屏幕；

您正在这一行的渲染中调用

setText

：

<TextInput style={styles.input} placeholder="Search" placeholderTextColor="#B9B9C5">{setText(text)}</TextInput>

{setText（text）}

请查看TextInput文档：

您可能想要的是：

<TextInput
  style={styles.input}
  onChangeText={setText}
  value={text}
  placeholder="Search"
  placeholderTextColor="#B9B9C5"
/>

先生，你真了不起。谢谢你，我现在明白了，很高兴这对你有用。如果有机会，请随意投票/接受。假设很容易在评论中回答，当然。我不确定我是否理解。。。您想在

文本输入中输入字母“O”？像是默认值吗？或者你想把它展示在外面？好的。。。所以您希望“O”出现在
TextInput
的边框内，是这样吗？如果是这样，您必须使用
TextInput
的
样式
，并在其外部使用
视图
。如果你不能让它看起来像你想要的那样，那么创建一个新的问题并问第二个问题可能是个好主意。不幸的是，在这里的评论部分不容易回答。