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

Question

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

我尝试将键属性插入平面列表以及我的 Item 组件中，但这没有帮助。还尝试删除我的 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>

RenderItem:

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>
    );
};

ChangeReps 在这里，我的 redux 商店中的锻炼对象发生了变化。

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

Answer 1

找到以下解决方法：

我在每个项目组件中为我的代表设置了一个状态。当 OnChangeText 被触发时，只有状态更新。之后，只有当 textInput 使用“OnEndEdit”道具失去焦点时，我才会更新我的 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>
    );
}

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

TextInput in FlatList item gets unfocused when changing value of redux object

javascript

typescript

reactjs

react-native

react-native-flatlist