避免在重新渲染父對象時失去對TextInput的關注？

Question

我的屏幕上有一個FlatList子級。 該子級包含幾個TextInputs和一些樣式。 我想在TextInputs的OnTextChange-功能中更新父狀態。 但是，在我當前的實現中，每當我在任何TextInputs中鍵入一個字符時，我都會失去焦點（鍵盤被關閉）。

如果我嘗試在父屏幕中創建TextInput並更新每個onChangeText上的狀態，則一切正常。

這是我的代碼（刪除了一些不重要的視覺組件）：

UserInfoScreen.js

const onChangeText = (setUserInfo, userInfo) => (backendLabel, text) => {
  console.log(backendLabel, text);
  setUserInfo({ ...userInfo, [backendLabel]: text });
};

const UserInfoScreen = () => {
  const { state } = useContext(AuthContext);
  const [isEditing, setIsEditing] = useState(false);
  const [userInfo, setUserInfo] = useState({
    firstName: '',
    lastName: '',
    email: '',
    phoneNr: '',
  });

...

  return (
    <View style={styles.root}>
      <SeparatedList
        onChangeText={onChangeText(setUserInfo, userInfo)}
        editable={isEditing}
        style={styles.list}
        content={[
          {
            label: 'FirstName:',
            text: userInfo.firstName,
            backendLabel: 'firstName',
          },
          {
            label: 'LastName:',
            text: userInfo.lastName,
            backendLabel: 'lastName',
          },
          { label: 'Email:', text: userInfo.email, backendLabel: 'email' },
          { label: 'Mobile:', text: userInfo.phoneNr, backendLabel: 'phoneNr' },
        ]}
      />
    </View>
  );
};

SeparatedList.js

const SeparatedList = ({ content, style, editable = false, onChangeText }) => {
  return (
    <View style={{ ...style }}>
      <FlatList
        bounces={false}
        data={content}
        renderItem={({ item }) => {
          return (
            <View style={styles.textContainer}>
              <CustomText style={styles.label}>{item.label}</CustomText>
              <TextInput
                editable={editable}
                onChangeText={text => onChangeText(item.backendLabel, text)}
              >
                <CustomText style={styles.text}> {item.text}</CustomText>
              </TextInput>
            </View>
          );
        }}
        ItemSeparatorComponent={() => <ListSeparator />}
        contentContainerStyle={styles.container}
        keyExtractor={it => `${it.label} ${Math.floor(Math.random() * 1000)}`}
      />
    </View>
  );
};

Answer 1

我修好了它。 在那排

keyExtractor={it => `${it.label} ${Math.floor(Math.random() * 1000)}`}

當我改用以下代碼時它起作用了：

keyExtractor={(item, index) => index.toString()}