Блог

Помогите мне, пожалуйста, с этой проблемой: есть «стрелки»-компоненты, которые изменяют состояние родительского компонента родительского компонента. Состояние общего родителя влияет на визуализацию его ребенка. Когда я использую Классы, мое приложение работает хорошо. Но если я попытаюсь использовать крючки, это сработает неожиданно: состояние общего родителя немедленно меняется, но повторная визуализация дочернего элемента не выполняется. Не могли бы вы сказать мне, в чем проблема? (код был упрощен)

с классами:

 //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>
        )
}