Реагируйте на изменения состояния компонента после следующего вызова функции

Я пытаюсь показать некоторую информацию, основанную на том, какой элемент был нажат.
Для этого я изменяю значение selectedSchedule состояния на различные значения в соответствии с тем, какая кнопка была нажата.

Информация (на данный момент, само значение selectedSchedule) отображается всегда тот, который должен был быть раньше. При нажатии кнопки «Segmented» отображается текст», значение selectedSchedule было инициализировано с. Затем, когда вы вернетесь и нажмете, ‘Uberman »Segmented появится’.

Я не знаю, является ли это проблемой с жизненным циклом компонента или если javascript/React обрабатывает функции асинхронно; функция, написанная после setState (), кажется, вызывается первой.

//SleepSchedules.js 
import React, { Component} from 'react';
import { Container, Content, Card, CardItem, Text, Icon, Button } from 'native-base';
import ScheduleItem from './ScheduleItem';

export default class SleepSchedules extends Component {
constructor(props) {
    super(props);
    this.state = {selectedSchedule: ''};
  }

   _handlePress(schedule){
    this.setState({
      selectedSchedule: schedule
    });

    this._navScheduleItem()
  }

   _navScheduleItem(){

     this.props.navigator.push({
         title: 'ScheduleItem',
         component: ScheduleItem,
         passProps: {scheduleName: this.state.selectedSchedule}
     })
   }

    render() {
        return (
            <Container style={{paddingTop:64}}>
                <Content>
                    <Card>
                        <CardItem button
                          onPress={()=> this._handlePress('Segmented')} >
                            <Text>Segmented</Text>
                        </CardItem>

                        <CardItem button
                          onPress={()=> this._handlePress('Everyman')}>
                          <Text>Everyman</Text>
                        </CardItem>

                        <CardItem button
                          onPress={()=> this._handlePress('Uberman')}>
                          <Text>Uberman</Text>
                        </CardItem>
                   </Card>
                </Content>
            </Container>
        );
    }
}

Вот компонент, который он передает, это реквизит:

import React, { Component} from 'react';
import { Container, Content, Card, CardItem, Text, Icon, Button } from 'native-base';
import ComingSoon from './ComingSoon';

export default class ScheduleItem extends Component {
  constructor(props){
    super(props);
  }

  render(){
    return(
     {this.props.scheduleName}
    );
  }
}

1 ответ

  1. Простой, setStateявляется ли асинхронным в этом случае (это синхронизация, в некоторых особых случаях, lol, правильно?). Это означает, никогда не полагаться на setState синхронизации…

    Есть 2 возможных решения.

    Во-первых: не ждите, пока состояние изменится. Передать полученное значение вручную, сразу.

    _handlePress(selectedSchedule) {
        this.setState({ selectedSchedule });
        this._navScheduleItem(selectedSchedule)
    }
    
    _navScheduleItem(scheduleName) {
        this.props.navigator.push({
            title: 'ScheduleItem',
            component: ScheduleItem,
            passProps: { scheduleName },
        })
    }
    

    Во-вторых: дождитесь распространения изменения состояния. Прочитайте обновленное значение состояния.

    _handlePress(selectedSchedule){
        this.setState({ selectedSchedule }, () => {
            this._navScheduleItem()
        });
    }
    
    _navScheduleItem(){
        this.props.navigator.push({
            title: 'ScheduleItem',
            component: ScheduleItem,
            passProps: { scheduleName: this.state.selectedSchedule }
        })
    }