Question

我试图根据按下的项目显示一些信息。为此，我根据按下的按钮将状态的selectedSchedule值修改为不同的值。

显示的信息（现在，selectedSchedule值本身）始终是之前应该存在的信息。当您按下“已分段”时，显示的文本为''，将使用初始化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}
    );
  }
}

Answer 1

简单，setState在这种情况下是异步的（它是同步的，在某些特殊情况下，大声笑，对吧？）。这意味着，永远不要依赖setState同步...

有两种可能的解决方案。

第一：不要等到状态改变。立即手动传递接收值。

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

跟随函数调用后，React组件状态发生了变化

1 个答案: