提交数据后文本输入无法使用

如何解决提交数据后文本输入无法使用

我正在我的应用中实现一个页面，该页面接受用户输入，然后在电视节目 API 中搜索与用户输入内容相关的节目。表单工作，数据成功返回，但是一旦点击搜索按钮并返回数据，搜索栏和搜索按钮将变得无响应并且不会调出键盘。这是在像素 3 AVD 上测试的，但是在使用 expo Go 的 iphone X 上，搜索按钮完全从页面上消失了！

代码如下：

import React,{useState} from 'react';
import { StyleSheet,Text,View,TextInput,TouchableOpacity,FlatList,ActivityIndicator,Image } from 'react-native';
import {AntDesign} from '@expo/vector-icons';



const ShowDisplay = ({navigation}) => {

  const[text,changeText] = useState('');
  const[data,setData] = useState([]);


  const check = (item) => {
    if(item.show.image){
      return(
        <Image source={{uri:item.show.image.medium}} style={{width:'100%',height: 200}} />
      )
    }else{
      return(
        <Text>Poo</Text>
      )
    }
  }
  

 const showfind = () =>{
  fetch('https://api.tvmaze.com/search/shows?q=' + text)
  .then((response)=> response.json())
  .then((json)=> setData(json))
  .catch((error)=>alert(error));
 }

const showSearch = (text) =>{
  showfind();
}


const changeHandler = (text) =>{
 changeText(text)
}

console.log('text is currently '+ text)


 return( 
  <>
    <View style={styles.container}>
    <View style = {styles.searchform}>
    <TextInput 
      placeholder = 'Search for a show'
       style = {styles.search}
       onChangeText={text => changeHandler(text)}
  />
  <TouchableOpacity onPress={() => showSearch(text)}>
    <AntDesign name="search1" size={30} color='black' style = {{marginTop: 19,marginLeft: 15,}}/>
  </TouchableOpacity>
  </View>
</View>

<View>
  {data? (<View style={styles.resultsContainer}>
<FlatList
style = {styles.list}
keyExtractor={(item,index)=> index.toString()}
  numColumns= '3'
  data={data}
  renderItem={({item}) => (
    <>
    <TouchableOpacity style = {styles.show} onPress={() => navigation.navigate('toShow',{
     id: item.show.id,} )}>    
  
    <View style={styles.text}>
    {check(item)}
     </View>
  </TouchableOpacity>
   

</>
  )}
  
  />
</View>) : (<View style={styles.loadingContainer}>

<ActivityIndicator size="large" color="#000"/>

</View>)}


</View>




</>

);

}

const styles = StyleSheet.create({

container: {
flex: 1,backgroundColor: '#fff',alignItems: 'center',},search :{
  paddingLeft: 15,marginTop: 20,borderRadius:30,width: 200,height: 30,borderWidth: 1,borderColor: '#000'
},header : {
  marginTop: 20,fontSize: 30,searchform:{
flexDirection: 'row',show:{
  width: '33.3%',height: 200,borderStyle: "solid",borderColor: 'white',list:{
 marginTop: 70,}

});

  
  export default ShowDisplay;

我想可能是因为sumbit按钮运行了一个功能，可能这个功能永远不会停止，需要重置？当按下 sumbit 按钮时，它会调用 API.. 我不确定发生了什么。

解决方法

看起来您使用 Fragment (Label) 作为根视图会产生奇怪的副作用。在某些情况下，这种风格会被抛弃。

由于您实际上没有理由使用 Fragment 作为根（您的 <></> 视图是根元素），删除它似乎可以解决问题。我还删除了您在搜索按钮中使用的不必要的片段。

container