更改 redux 对象的值时，FlatList 项中的 TextInput 变得不集中答案

【问题标题】：TextInput in FlatList item gets unfocused when changing value of redux object更改 redux 对象的值时，FlatList 项中的 TextInput 变得不集中
【发布时间】：2021-07-28 06:31:48
【问题描述】：

我正在使用我的 redux 存储中安全的嵌套对象来呈现我的 FlatList。在每个设置项目中，我都有一个 textInput 来更改我设置中的代表，但是每次我更改输入的值时，它都会失去焦点并且键盘会消失。他们是一种阻止注意力不集中的输入的方法吗？

我尝试在平面列表和我的 Item 组件中插入 key 属性，但这没有帮助。还试图删除我的 FlatList 的 extraData 属性。我想在这种情况下没有必要拥有这个。

有人可以帮忙吗？

我的对象：

Workout:{
    ExercisList:[
        {
           sets to render:[
            {set 1 },
            {set 2},
            {set 3},
           ]
        },
        .
        .
        .
    ]
}

平面列表：

<View>
<FlatList
      data={workout.exerciseList.find((exerciseList) => exerciseList.elid === route.params.elid)?.sets}
      renderItem={renderItem}
      extraData={workout.exerciseList.find((exerciseList) => exerciseList.elid === route.params.elid)?.sets}
      keyExtractor={(item) => item.sid.toString()}
/>
</View>

渲染项：

const renderItem = ({ item }: { item: Set }) => {
    return (
        <Item
            key={item.sid}
            sid={item.sid}
            elid={item.elid}
            sortOrder={item.sortOrder}
            reps={item.reps}
            weightKG={item.weightKG}
            weightLBS={item.weightLBS}
            finished={item.finished}
        />
    );
};

项目：

    const Item = ({ sortOrder, reps, weightKG, weightLBS, sid, elid }: Set, key: any) => {
    return (
        <Swipeable
            rightThreshold={30}
            renderRightActions={() => (
                <View style={{ backgroundColor: "red" }}>
                    <Text>Delete</Text>
                </View>
            )}
            onSwipeableRightOpen={() => console.log("Delete Set")}
        >
            <View style={styles.item} key={key}>
                <Text>{sortOrder}</Text>
                <Text>{lang.t("reps")}</Text>
                <TextInput
                    key={sid}
                    onChangeText={(reps) => changeReps(reps, sid, elid)}
                    value={reps.toString()}
                    keyboardType='number-pad'
                ></TextInput>
                
            </View>
        </Swipeable>
    );
};

变更代表 这里我的 redux 商店中的锻炼对象发生了变化。

const changeReps = (reps: string, sid: string, elid: string) => {
    dispatch(updateRepsWorkout(parseInt(reps), sid, elid));
};

【问题讨论】：

标签： javascript reactjs typescript react-native react-native-flatlist

【解决方案1】：

找到以下解决方法：

我在每个项目组件中为我的代表设置了一个状态。当 OnChangeText 被触发时，只有状态更新。之后，只有当 textInput 失去焦点时，我才更新我的 redux 存储对象。

const Item = ({ sortOrder, reps, weightKG, weightLBS, sid, elid, finished, index }: any) => {
    const [outputReps, setOutputReps] = React.useState(reps.toString());

    return (
        <Swipeable
            rightThreshold={30}
            renderRightActions={() => (
                <View style={{ backgroundColor: "red" }}>
                    <Text>Delete</Text>
                </View>
            )}
            onSwipeableRightOpen={() => console.log("Delete Set")}
        >
            <View style={styles.item}>
                <Text>{sortOrder}</Text>
                <Text>{lang.t("reps")}</Text>
                <TextInput
                    key={sid}
                    onChangeText={(reps) => setOutputReps(reps)} <-- Here I change state!
                    onEndEditing={() => changeReps(outputReps, sid, elid)} <-- here I change my redux object 
                    value={outputReps}
                    keyboardType='number-pad'
                ></TextInput> 
            </View>
        </Swipeable>
    );
}

【讨论】：