时间戳

首页 > 解决方案 > React Native Flatlist 仅更新最后一项

react-native - React Native Flatlist 仅更新最后一项

问题描述

当我尝试更新平面列表中的数据时，它不会更新所选项目，而只会更新插入的最后一个项目。

更新：

    const updateUser = (item) => {
        setModalVisible(false);
        let jobRef = firebase.database().ref("user/" + userId + "/job/" + item.id);
        jobRef
            .update({ name: newName})
            .then(res => console.log(res))
            .catch(err => console.log(err));
    };

keyExtractor 和 renderItem

const keyExtractor = (item, index) => index.toString();
const renderItem = ({ item }) => {
        return (
           <View>
                <Modal visible={modalVisible}>
                    <View style={styles.modal}>
                        <TextInput
                            onChangeText={text => setNewName(text)} />
                                <TouchableOpacity
                                    onPress={() => setModalVisible(false)} style={styles.button}>
                                    <Text style={styles.buttonText}>
                                        Cancel
                                    </Text>
                                </TouchableOpacity>
                                <TouchableOpacity
                                    onPress={() => updateUser(item)} style={styles.button}>
                                    <Text style={styles.buttonText}>
                                        Confirm
                                    </Text>
                                </TouchableOpacity>
                    </View>
                </Modal>
                <View>
                    <TouchableOpacity
                        onPress={() => { setModalVisible(true)}}>
               </View>
           </View>
        );
    };

平面列表

<FlatList
                  keyExtractor={keyExtractor}
                  data={menus}
                  renderItem={renderItem}
        />

例如，我单击要编辑的平面列表中的项目。它打开了一个模态。我在 textInput 中输入新数据。它更新最后插入的项目，而不是我选择的项目。我认为 keyExtractor 有助于选择平面列表中的项目，但我没有看到我的 keyExtractor 有任何问题。

任何建议将不胜感激。谢谢你。

标签： react-nativereact-native-flatlist

解决方案

这似乎是因为您所有的模式共享相同的modalVisible状态（如果不是，请更新您的代码片段）。如果是这种情况，请尝试重构您的代码，以便在 之外仅呈现一个模式，FlatList然后添加item/setItem状态以指定模式应更新的项目。从您的列表项中设置此项。

您还可以使用item/setItem来控制模态可见性（在设置项目时显示，然后在隐藏模态时将其设置为 null）。

推荐阅读