警惕RNTextInput控件因key不固定造成的输入后失去焦点，丢失字符等问题

根本原因：react/react native 采用diff算法，若重新渲染时dom的key不同则会生成新dom，造成字符丢失，失去焦点等问题。

例如：

1.  
   <SafeAreaView style={tw.style('bg-white', { flex: 1 })}>
2.  
   <FlatList
3.  
   contentContainerStyle={tw.style('p-5 mb-5')}
4.  
   data={location}
5.  
   keyExtractor={(item, index) => `${item.id}-${index}`}
6.  
   renderItem={renderItem}
7.  
   ListHeaderComponent={() => {
8.  
   return (
9.  
   <React.Fragment key={'haha'}>
10.  
     
11.  
    <View
12.  
    style={{
13.  
    paddingVertical: 3,
14.  
    borderBottomWidth: 1,
15.  
    borderColor: 'rgba(105,105,105,1)',
16.  
    marginBottom: 5,
17.  
    }}
18.  
    >
19.  
    <TextInput
20.  
    style={{
21.  
    paddingLeft: 5,
22.  
    fontSize: 20,
23.  
    fontFamily: 'InterRegular',
24.  
    color: 'rgba(105,105,105,1)',
25.  
    }}
26.  
    placeholder="place input your destination"
27.  
    onChangeText={searchDestination}
28.  
    />
29.  
    </View>
30.  
    </React.Fragment>
31.  
    );
32.  
    }}
33.  
    ListFooterComponent={() => {
34.  
    return <View></View>;
35.  
    }}
36.  
    />
37.  
    </SafeAreaView>

本例中，TextInput控件虽然没有写在内容区而是写在了listHeader区，但是每次刷新仍然会出问题。

解决方法应该是将TextInput写到FlatList外。或者通过代码令其不重复渲染。

这篇好文章是转载于：学新通技术网