提交数据后文本输入变得不可用

Question

我正在我的应用程序中实现一个页面，该页面接受用户输入，然后搜索电视节目 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',
  borderWidth: 1,
}, 
list:{
 marginTop: 70,
 
}

});

  
  export default ShowDisplay;

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

Answer 1

使用 Fragment (<></>) 作为根视图似乎产生了奇怪的副作用。这种风格在某些情况下会被抛弃。

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

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>
   {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>
</View>
);

提交数据后文本输入变得不可用

Text input becomes unusable after submitting data

react-native

submit

user-input