反应本机状态在保存时回到初始状态

Question

我正在构建一个 react-native 应用程序并在我的应用程序中使用 react-native-tab-view。

我的屏幕有两个标签，每个标签都有一个文本字段。

状态处于 MyScreen，我将 state 和 setState 作为属性传递给选项卡。

我添加了 useEffect 以在状态更改时记录状态，当我在 child 选项卡上的两个字段中的任何一个字段中键入文本时，状态都会正确更新。

屏幕正在向导航栏的 header 右侧添加一个保存按钮。

我的问题是状态已更新，但当我单击保存时，它似乎被设置回初始值，如 saveState 函数中的日志所示；

请指教

import React, { useState, useEffect, useContext } from "react";
import { StyleSheet, View, Dimensions, TextInput, ScrollView, TouchableOpacity, Picker, Switch } from "react-native";
import { TabView, TabBar } from "react-native-tab-view";
import DateTimePicker from "@react-native-community/datetimepicker";

const Tab1 = ({ navigation, state, setState }) => {
    return (
        <View style={styles.scene}>
            <ScrollView>
                <SansBoldText style={styles.label}>First</SansBoldText>
                <TextInput style={styles.field} value={state.first} onChangeText={(text) => setState((prevState) => ({ ...prevState, first: text }))} />
            </ScrollView>
        </View>
    );
};

const Tab2 = ({ navigation, state, setState }) => {
    return (
        <View style={styles.scene}>
            <ScrollView>
                <SansBoldText style={styles.label}>Second</SansBoldText>
                <TextInput style={styles.field} value={state.second} onChangeText={(text) => setState((prevState) => ({ ...prevState, second: text }))} />
            </ScrollView>
        </View>
    );
};

const initialLayout = { width: Dimensions.get("window").width };

export default function MyScreen({ navigation }) {
    const [index, setIndex] = useState(0);
    const [routes] = useState([
        { key: "tab1", title: "Tab1" },
        { key: "tab2", title: "Tab2" },
    ]);

    const [state, setState] = useState({
        first: "",
        second: "",
    });

    const saveState = () => {
        console.log(state); // this prints the initial state even after it is already changed
    };

    useEffect(() => {
        navigation.setOptions({
            headerRight: () => {
                return (
                    <TouchableOpacity activeOpacity={0.5} style={{ paddingRight: 10 }} onPress={saveState}>
                        <Ionicons name="md-save" size={30} />
                    </TouchableOpacity>
                );
            },
        });
    }, []);
    
    useEffect(() => {
        console.log("state changed = ", state);
    }, [state]);

    const renderScene = ({ route }) => {
        switch (route.key) {
            case "tab1":
                return <Tab1 navigation={navigation} state={state} setState={setState} />;
            case "tab2":
                return <Tab2 navigation={navigation} state={state} setState={setState} />;
            default:
                return null;
        }
    };

    const renderTabBar = (props) => <TabBar {...props} indicatorStyle={{ backgroundColor: "black" }} style={{ backgroundColor: "#e0e0e0" }} labelStyle={{ color: "#000" }} />;

    return <TabView navigationState={{ index, routes }} renderTabBar={renderTabBar} renderScene={renderScene} onIndexChange={setIndex} initialLayout={initialLayout} />;
}

Answer 1

@anwar 在第一个 useEffect 中将状态添加为依赖项，并像在第二个 useEffect 中那样传递第二个参数 [state]。

反应本机状态在保存时回到初始状态

react native state is back to initial on save

reactjs

react-native

react-native-navigation

react-native-tab-view