React Native函数式组件项目中视图无法重新渲染问题求助

问题原因 #

核心问题出在CardapioPage组件的状态声明逻辑上：
React中useState的初始值仅在组件第一次挂载时生效，后续父组件传入的cardapio prop更新时，CardapioPage内部的cardapio state不会自动同步更新，所以始终渲染首次传入的模拟数据。你在App组件中更新cdp状态已经生效，只是子组件没有使用最新的prop值。

解决方案 #

方案1：删除子组件冗余状态（推荐，适用于子组件不需要修改cardapio的场景） #

如果CardapioPage不需要单独修改cardapio数据，完全没必要在内部单独维护state，直接透传props即可，修改代码如下：

type Props = {
    cardapio: Cardapio
};
export const CardapioPage = (props: Props) => {
    return (
        <View>
            <CardapioView cardapio={props.cardapio}/>
        </View>
    );
};

这种方案最简单，也避免了多状态同步的潜在问题。

方案2：添加状态同步逻辑（适用于子组件需要单独修改cardapio的场景） #

如果子组件后续需要修改cardapio数据，必须维护内部state的话，添加useEffect监听prop变化，同步更新内部state：

type Props = {
    cardapio: Cardapio
};
export const CardapioPage = (props: Props) => {
    const [cardapio, setCardapio] = useState(props.cardapio);
    // 新增监听逻辑，父组件prop变化时同步更新子组件state
    useEffect(() => {
        setCardapio(props.cardapio)
    }, [props.cardapio])

    return (
        <View>
            <CardapioView cardapio={cardapio}/>
        </View>
    );
};

补充注意项 #

你代码中setCdp({...newState})用的是对象浅拷贝，如果你的Cardapio类型包含深层嵌套的数组、子对象，后续修改深层属性时可能出现响应式问题，建议根据数据结构调整为深拷贝，或者使用Immer这类库处理不可变数据更新。

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