放入 FlatList 时，TextInput 在第一个字符后失去焦点？

Question

我见过类似的问题，但还没有能够使用钩子为这个实例应用解决方案。我将 TextInput 放在 FlatList 中，它将更新记分板列表中的团队名称之一。一切正常，但我的键盘在输入一个字符后会失去焦点。我相信这是使用 useState 时的预期行为，因为每次更新后状态都会重新显示，但我无法想出另一种方法来更新我的数据（或与此相关的任何状态），以便键盘保持焦点.

有什么办法可以做到这一点吗？我曾尝试使用 useRef 但没有成功。我也对这种行为感到困惑，因为我可以在 TextInput 中使用 setState，而当它不在 FlatList 内时就好了。

import React, {useState} from 'react';
import {Text, View, TextInput, FlatList} from 'react-native';


const Scoreboard = () => {

      const [Teams, setTeams] = useState(
    [
        {
            id: 1,
            name: '',
        },
        {
            id: '2',
            name: '', 
        },
        {
            id: '3',
            name: '',  
        },
        {
            id: '4',
            name: '',
        },
    ]

)

      const [TeamNames, setTeamNames] = useState(['Team 1', 'Team 2', 'Team 3', 'Team 4'])

      const MapTeamNames = ({text, id}) => {
            let newArray = [...TeamNames];
            newArray[id - 1] = text;
            setTeamNames(newArray);
       }

      const TeamList = ({name, id}) => {

        return(
            <View>
                <View style={{flexDirection: 'row', alignItems: 'center',justifyContent: 'space-between', margin: 10}}>
                    <TextInput 
                        placeholder={name}
                        placeholderTextColor='#000000a5'
                        style={{textAlign: 'left', height: 30, width: 150}}
                        maxLength={20}
                        onChangeText={text => MapTeamNames({text, id})}    
                    />   
                </View>
            </View>
        );
    };

     const renderTeamList = ({item}) => {

        return (
            <TeamList 
                name={item.name}
                id={item.id}
            />
        );
      };

     return (
        <View>
           <FlatList 
               data={Teams}
               renderItem={renderTeamList}
               keyExtractor={item => item.id.toString()}
               showsVerticalScrollIndicator={false}
               scrollEnabled={false}
           />
        </View>
     )
}

export default Scoreboard;