React native 更改父组件的状态后，子组件的重新渲染正在使用类，但它'；他不是在用钩子干活

请帮我解决这个问题：有“箭头”-组件可以改变父组件的父组件的状态。一般父对象的状态影响其子对象的渲染。当我使用这些类时，我的应用程序运行良好。但如果我尝试使用钩子，它会意外地工作：一般父级的状态立即更改，但子级的重新渲染不会执行。你能告诉我有什么问题吗？（代码已简化）

带类：

//general parent component

export default class Container extends React.Component {
    constructor(props) {
        super(props);
        this.state = { page: 5 };
        this.nextPage = this.nextPage.bind(this);
    }
    nextPage() {
            let currentPage = this.state.page;
            this.setState({ page: currentPage +1});
        }
    render() {
        return (
                 <List 
                     onPageUp={this.nextPage}
                     statePage={this.state.page}
                 />
               );
        }
    }

//child
export default class List extends React.Component {
    constructor(props) {
        super(props);
    }

render() {
        const thisPage = this.props.statePage;
        /*here's the calculations depending on thisPage*/
        return (
            <View>
               <ArrowRight onPageUp={this.props.onPageUp} />
               <SomeView />
            </View>
          );
      }
}


//right arrow - child of the child
export default class ArrowRight extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View>
                <TouchableOpacity
                    onPress={() => this.props.onPageUp()}
                >                    
                </TouchableOpacity>
            </View>

        )
    }
}

//general parent component
export default function Container() {
    const [page, setPage] = useState(5);
    
    const nextPage = () => {
        let currentPage = page;
        setPage(currentDate + 1);
    }

    return (
        <View>
            <List
                statePage={page}
                nextPage={nextPage}                
            />    
       </View>
    );
}

//child
export default function List (props) {
     
    const thisPage = props.statePage;
    /*here's the calculations depending on thisPage*/
    return (
        <View>
           <ArrowRight nextPage={props.nextPage} />
           <SomeView />
        </View>
}

//right arrow - child of the child
export default function ArrowRight(props) {
        return (
            <View>
                <TouchableOpacity
                    onPress={() => props.nextPage()}
                >          
                </TouchableOpacity>         
            </View>
        )
}

//通用父组件
导出默认类容器扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={page:5}；
this.nextPage=this.nextPage.bind（this）；
}
下一页（）{
让currentPage=this.state.page；
this.setState（{page:currentPage+1}）；
}
render（）{
返回(
);
}
}
//孩子
导出默认类列表扩展React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
const thisPage=this.props.statePage；
/*这是根据本页计算的结果*/
返回(
);
}
}
//右箭头-子对象的子对象
导出默认类ArrowRight扩展React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
this.props.onPageUp（）}
>                    
)
}
}

带挂钩：

//general parent component

export default class Container extends React.Component {
    constructor(props) {
        super(props);
        this.state = { page: 5 };
        this.nextPage = this.nextPage.bind(this);
    }
    nextPage() {
            let currentPage = this.state.page;
            this.setState({ page: currentPage +1});
        }
    render() {
        return (
                 <List 
                     onPageUp={this.nextPage}
                     statePage={this.state.page}
                 />
               );
        }
    }

//child
export default class List extends React.Component {
    constructor(props) {
        super(props);
    }

render() {
        const thisPage = this.props.statePage;
        /*here's the calculations depending on thisPage*/
        return (
            <View>
               <ArrowRight onPageUp={this.props.onPageUp} />
               <SomeView />
            </View>
          );
      }
}


//right arrow - child of the child
export default class ArrowRight extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View>
                <TouchableOpacity
                    onPress={() => this.props.onPageUp()}
                >                    
                </TouchableOpacity>
            </View>

        )
    }
}

//general parent component
export default function Container() {
    const [page, setPage] = useState(5);
    
    const nextPage = () => {
        let currentPage = page;
        setPage(currentDate + 1);
    }

    return (
        <View>
            <List
                statePage={page}
                nextPage={nextPage}                
            />    
       </View>
    );
}

//child
export default function List (props) {
     
    const thisPage = props.statePage;
    /*here's the calculations depending on thisPage*/
    return (
        <View>
           <ArrowRight nextPage={props.nextPage} />
           <SomeView />
        </View>
}

//right arrow - child of the child
export default function ArrowRight(props) {
        return (
            <View>
                <TouchableOpacity
                    onPress={() => props.nextPage()}
                >          
                </TouchableOpacity>         
            </View>
        )
}

//通用父组件
导出默认函数容器（）{
const[page，setPage]=useState（5）；
常量下一页=（）=>{
设currentPage=page；
设置页（当前日期+1）；
}
返回(
);
}
//孩子
导出默认功能列表（道具）{
const thisPage=props.statePage；
/*这是根据本页计算的结果*/
返回(
}
//右箭头-子对象的子对象
导出默认功能向右箭头（道具）{
返回(
props.nextPage（）}
>          
)
}