React Native: дополнительное представление не перезагружалось с изменением состояния

Question

Один компонент Itie в приложении React Native 0.62.2 имеет компонент sub view ButtonInHead. ButtonInHead возвращает активную кнопку «Сохранить», когда состояние post становится true. Вот код:

import { Button, Left, Right, Body, Icon, Label, Item, Input, Text, Card, CardItem, Header, Container, Content, Form } from 'native-base';


const Itie = () => {  //<<<===component Itie
    const [post, setPost] = useState(false);  //<<<==state post is false initially

    const ButtonInHeader = ({enabled}) => {  //<<<==sub view component 
        if (enabled) {
            return (<Button hasText onPress={clickSave}>
                        <Text>Save</Text>
                    </Button>)
        } else {
            return (<Button hasText disabled >
                        <Text>Save</Text>
                    </Button>)
        };
    };    

    const clickSave = async () => {
          Alert.alert("Save clicked");
    };
    
    return (
        <SafeAreaView> 
            <ScrollView>
                <Container>
                    <Header transparent>
                        <Right>
                            <ButtonInHeader enable={post} /> //<<<==when state post becomes true. button shall be enabled
                        </Right>
                    </Header>
                    <Content>
                        <Form>
                        ......
                        </Form>
                    </Content>
                </Container>
            </ScrollView>
        </SafeAreaView>
    
    );
};

Проблема в том, что после того, как post становится true, компонент дополнительного представления ButtonInHead не был перезагружен (на симуляторе android), и кнопка остается отключенной. Поскольку состояние post передается в ButtonInHead, и я понимаю, что всякий раз, когда изменяется post, тогда ButtonInHead должен быть перезагружен. Очевидно, это еще не все. Как принудительно перезагрузить ButtonInHead при изменении post?

Answer 1

Проблема решена введением состояния post в ButtonInHead путем выполнения:

return (<Button hasText onPress={clickSave} disabled={!post}>
                        <Text>Save</Text>
                    </Button>)

Фактически, ButtonInHead больше не нужен и может быть заменен на:

<Button hasText onPress={clickSave} disabled={!post}>
                            <Text>Save</Text>
                        </Button>