为什么我的 useState 值会在 onPress 方法中重置？

Question

我在我的 React 本机组件中使用了一个名为 tripState 的 useState。

const [tripState, setTripState] = useState<NewTripState>({
    name: "",
    description: "",
    thumbnail: "",
});

我使用函数更改其在文本字段中的值：

const onChange = (
    key: keyof NewTripState,
    value: string | null,
): void => {
    setTripState({
        ...tripState,
        [key]: value,
    });
};

文本输入：

<TextInput
    value={tripState.name}
    onChangeText={(value: string): void => {
        onChange("name", value);
    }}
    placeholder={"Enter trip name"}
/>

在文本输入时调用。如果我 console.log 中的值：

useEffect(() => {
    console.log(tripState); // console.logs updated state
}, [tripState]);

它控制台记录正确的（更新的）值，但是当我尝试在我的 onSubmit 方法中控制台记录它时，该方法在 Pressable 上的 onPress 上调用，我得到了初始值。

<Pressable onPress={onSubmit}>
    <Text>Save</Text>
</Pressable>

const onSubmit = () => {
    console.log(tripState); // console.logs initial state
};

有人可以帮助我吗？我不知道该怎么做了。

编辑 1：整个组件：

import React, { useEffect, useState } from "react";
import { useColorScheme } from "react-native";
import { getUserHoliday } from "../../api/firestore/trips";
import ProfilePicture from "../../components/ProfilePicture";
import {
    View,
    Text,
    Pressable,
} from "../../components/Themed";
import { tintColorLight } from "../../constants/Colors";
import store from "../../redux/store";
import { getUserId } from "../../redux/stores/user";
import { Holiday } from "../../utils/types/holiday";
import { Trip } from "../../utils/types/trip";

type NewTripScreenProps = {
    navigation: any;
    route: any;
};

export type NewTripState = {
    name: string;
    description: string;
    thumbnail: string;
};

const NewTripScreen = (props: NewTripScreenProps) => {
    const { navigation } = props;

    const [tripState, setTripState] = useState<NewTripState>({
        name: "",
        description: "",
        thumbnail: "",
    });

    useEffect(() => {
        console.log(tripState);
    }, [tripState]);

    const onChange = (
        key: keyof NewTripState,
        value: string | null,
    ): void => {
        setTripState((currentValue) => ({
            ...currentValue,
            [key]: value,
        }));
    };

    const userId = getUserId(store.getState());

    const colorScheme = useColorScheme();

    useEffect(() => {
        getUserHoliday(userId).then((holidays) => {
            setHolidays(holidays);
        });

        navigation.setOptions({
            headerTitle: "New Trip",
            headerRight: () => (
                <Pressable onPress={onSubmit}>
                    <Text
                        style={{
                            color: tintColorLight,
                            fontSize: 18,
                        }}
                    >
                        Save
                    </Text>
                </Pressable>
            ),
            headerTintColor: tintColorLight,
            headerTitleStyle: {
                color: colorScheme === "dark" ? "#fff" : "#000",
            },
        });
    }, []);

    const onSubmit = () => {
        console.log(tripState.name);

        const trip: Trip & { holiday?: Holiday | null } = {
            userId: userId,
            ...tripState,
            status: "created",
        };
    };

    return (
            <View>
                <Text
                    style={{
                        fontWeight: "bold",
                        fontSize: 32,
                        padding: 10,
                    }}
                >
                    New Trip
                </Text>
                <View style={{ alignItems: "center", marginTop: 20 }}>
                    <TextInput
                        value={tripState.name}
                        onChangeText={(value: string): void => {
                            onChange("name", value);
                        }}
                        placeholder={"Enter trip name"}
                    />

                    <TextInput
                        value={tripState.description}
                        onChangeText={(value: string): void => {
                            onChange("description", value);
                        }}
                        placeholder={"Enter Description"}
                        style={{ marginTop: 20 }}
                    />
                    <Text
                        style={{
                            fontWeight: "bold",
                            fontSize: 32,
                            padding: 10,
                        }}
                    >
                        Thumbnail
                    </Text>
                    <ProfilePicture
                        photoURL={tripState.thumbnail}
                        onPress={() => {}}
                    />
                </View>
            </View>
    );
};

export default NewTripScreen;

Answer 1

您要查找的主题是 'stale values'。当值被锁定在您的函数中并且不刷新时，就会发生这种情况。 React useState 有办法解决这个问题，非常简单：

而不是：

setTripState({
  ...tripState,
  [key]: value,
});

告诉setState你想使用最多的up-to-date值：

setTripState(currentValue => ({
  ...currentValue,
  [key]: value,
}));

Answer 2

这是因为 useEffect 具有空的依赖项数组。当您在 Pressable 的 onPress 侦听器上添加 onSubmit() 时，由于 useEffect 具有空依赖数组，因此使用 onSubmit 中的 tripState 的原始值。

像这样更改代码

    useEffect(() => {
        getUserHoliday(userId).then((holidays) => {
            setHolidays(holidays);
        });

        navigation.setOptions({
            headerTitle: "New Trip",
            headerTintColor: tintColorLight,
            headerTitleStyle: {
                color: colorScheme === "dark" ? "#fff" : "#000",
            },
        });
    }, []);

  useEffect(() => {
       navigation.setOptions({
           headerRight: () => (
                <Pressable onPress={onSubmit}>
                    <Text
                        style={{
                            color: tintColorLight,
                            fontSize: 18,
                        }}
                    >
                        Save
                    </Text>
                </Pressable>
            )
           });
    }, [tripState]);

为什么我的 useState 值会在 onPress 方法中重置？

Why does my useState value reset in onPress method?

javascript

reactjs

react-native

use-state