Question

当我尝试更新 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 有任何问题。

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

Answer 1

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

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

React Native Flatlist 只更新最后一项

1 个答案: