javascript - FlatList re-render causing unwanted navigation when property update triggered by useState change - Stack Overflow

admin管理员组

文章数量:1194164

I've got a FlatList that takes a property called sections as it's data property. Sections is computed when a useState, in it's dependency array, changes after the user has entered or changed some data in a TextInput.

The FlatList and sections are in the same source file, the TextInput is in another, and the useState is in another. The useState is imported into both source files containing the FlatList and TextInput.

When I type in the TextInput field it unwantingly auto navigates to the screen with the FlatList. I've replaced setBleDevices in the setCloudID method with setTestValue(id). I can then type in the TextInput field and it doesn't navigate away from that screen, so I'm pretty certain it's setBleDevices that's causing the unwanted navigation.

I've tried using bleDevices[bleDevice?.id] in the sections dependency array, so that it only triggers when the desired bleDevice has changes rather than the whole bleDevices state. I've also tried wrapping the sections method in a useFocusEffect, so that it's only computed when the screen with the FlatList is visible to the user, and not while they're in the screen with the TextInput field.

const cloudID = (() => {
    switch (settingsType) {
        case "Temperature":
            return bleDevices[bleDevice.id]?.sections?.Temperature?.cloud_id || "";
        case "Humidity":
            return bleDevices[bleDevice.id]?.sections?.Humidity?.cloud_id || "";
        case "Panic":
            return bleDevices[bleDevice.id]?.sections?.Panic?.cloud_id || "";
        default:
            return "";
    }
})();
        
const setCloudID = (id) => {
    setBleDevices((prevBleDevices) => {
        const updatedBleDevices = { ...prevBleDevices };
        updatedBleDevices[bleDevice.id] = {
            ...updatedBleDevices[bleDevice.id],
            bleDeviceAddress: bleDevice.id,
            sections: {
                ...updatedBleDevices[bleDevice.id]?.sections,
                [settingsType]: {
                    ...updatedBleDevices[bleDevice.id]?.sections?.[settingsType],
                    cloud_id: id,
            }
            }
        };
        return updatedBleDevices;
    });
};

const inputsConfig = [
    {
        value: cloudID,
        setValue: setCloudID,
        placeholder: `Cloud ${settingsType} ID - e.g. 22`,
        validationError: cloudIDError,
        setValidationError: setCloudIDError,
        validationFunction: isIDString,
        errorMessage: "Please use only whole numbers 0 to 9",
        keyboardType: "number-pad",
    },
    {
        value: localID,
        setValue: setLocalID,
        placeholder: `Local ${settingsType} ID - e.g. 10`,
        validationError: localIDError,
        setValidationError: setLocalIDError,
        validationFunction: isIDString,
        errorMessage: "Please use only whole numbers 0 to 9",
        keyboardType: "number-pad",
    }
];

{inputsConfig.map((input, index) => (
    <View key={index}>
        <TextInput
            style={[
                styles.textInput,
                input.validationFunction(input.value)
                    ? { borderColor: theme.text }
                    : { borderColor: Colors.danger },
                      { color: theme.text },
            ]}
            ref={(el) => (inputRefs.current[index] = el)}
            returnKeyType={index < inputsConfig.length - 1 ? "next" : "done"}
            onSubmitEditing={() => {
                if (index < inputsConfig.length - 1) {
                    inputRefs.current[index + 1].focus();
                } else if (canSave()) {
                    syncWithHub();
                }
            }}
            value={input.value}
            onChangeText={input.setValue}
            placeholder={input.placeholder}
            placeholderTextColor={Colors.darkGray}
            keyboardType={input.keyboardType}
        />
        <Text
            style={[
                styles.errorText,
                { marginTop: -15, marginBottom: 10 }
            ]}
        >
            {input.validationError}
        </Text>
    </View>
))}

import { useDevice } from "../../Context/DeviceContext.js";

const {
    hubDevice,
    bleDevice,
    setBleDevices,
    bleDevices
} = useDevice();

const sections = useMemo(() => {
   const device = bleDevices[bleDevice?.id];
   return BleSections({ device });
}, [bleDevice?.id, bleDevices]);

<FlatList
    data={sections}
    renderItem={({ item }) => (
        <BleSectionRender title={item.title} data={item.data} />
    )}
    keyExtractor={(item, index) => index.toString()}
    contentContainerStyle={ScanStyle.content}
/>

本文标签：