React Native子组件更新Context后父页面状态自动同步方法

完全可以实现该需求，你当前代码不生效的核心原因：

• useState传入的初始值仅在组件首次挂载时读取一次，后续Context值变更不会自动同步到本地state
• ContextProvider初始状态值和Context定义的默认值不一致，会导致首次加载显示异常

方案1：直接使用Context值（推荐，无冗余状态） #

Context本身具备响应式能力：只要组件被DateContextProvider包裹，Context值更新时，所有调用useContext(DateContext)的组件都会自动触发重渲染，完全不需要额外维护一份本地selectedDate状态。
直接修改Appointments页面代码即可：

import { Dimensions, StyleSheet, Text, View } from "react-native";
import React, { useContext } from "react";
import DateSelect from "../UI/DateSelect";
import { GlobalStyles } from "../constants/GlobalStyles";
import { DateContext } from "../store/dateContext";

export default function Appointments() {
    const datePickedCtx = useContext(DateContext);

    // 直接使用Context中的值，无需额外useState存储
    const selectedDate = datePickedCtx.date;

    return (
        <View style={styles.rootContainer}>
            <View style={styles.dateContainer}>
                <Text style={styles.dateText}>{selectedDate}</Text>
                <DateSelect size={24} color={GlobalStyles.colors.lightText} />
            </View>
        </View>
    );
}

const deviceWidth = Dimensions.get("screen").width;

const styles = StyleSheet.create({
    rootContainer: {
        flex: 1,
        padding: 8,
        alignItems: "center",
    },
    dateContainer: {
        flexDirection: "row",
        justifyContent: "space-evenly",
        backgroundColor: GlobalStyles.colors.primary500,
        width: deviceWidth < 380 ? 200 : 200,
        padding: 8,
        marginVertical: 8,
        borderRadius: 8,
    },
    dateText: {
        fontSize: 18,
        fontWeight: "bold",
        color: GlobalStyles.colors.lightText,
    },
});

这个方案没有重复状态，不存在状态不一致的隐患，代码最简洁，是这类场景的首选实现。

方案2：需保留本地state时，用useEffect同步Context值 #

如果你后续需要基于选中日期做本地衍生逻辑、必须保留独立的selectedDate本地状态，可以通过useEffect监听Context值变化，手动同步到本地state：

// 先从react中引入useEffect
import React, { useContext, useState, useEffect } from "react";

export default function Appointments() {
    const datePickedCtx = useContext(DateContext);
    const [selectedDate, setSelectedDate] = useState(datePickedCtx.date);

    // 监听Context中date的变化，同步更新本地state
    useEffect(() => {
        setSelectedDate(datePickedCtx.date);
    }, [datePickedCtx.date]);

    // 其余页面代码保持不变
}

必做的Context初始化修复 #

你当前的Context代码存在初始值不一致的问题：createContext时默认值是当日格式化日期，但Provider内部的theDate初始值是空字符串，会导致页面首次加载时显示空值。修改ContextProvider的初始state即可：

function DateContextProvider({ children }) {
    // 初始值改为当日格式化日期，和Context默认值对齐
    const [theDate, setTheDate] = useState(getFormattedDate(new Date()));

    function setDate(date) {
        setTheDate(date);
    }

    const value = {
        date: theDate,
        setDate: setDate,
    };

    return <DateContext.Provider value={value}>{children}</DateContext.Provider>;
}

另外要确认你的根组件已经用DateContextProvider包裹了Appointments页面，否则Context无法正常生效。

内容的提问来源于stack exchange，提问作者Spacejocks