React - возврат состояния undefined - PullRequest
Новая
       40

React - возврат состояния undefined

0 голосов
/ 06 мая 2020

Я использую переменную состояния в своем классе, но, похоже, она не работает. И когда я пытаюсь увидеть его значение через console.log, он возвращает undefined. Что я делаю не так? 

class ContactScreen extends Component {

    static contextType = Context

    constructor(props) {
        super(props)
        this.state = {
            searchMode: false //this is my variable
        }
        setTimeout(() => {
          StatusBar.setBackgroundColor(primary)
        }, 100)
    }

    onContactAction = (contact) =>  {
        this.props.navigation.navigate('Chat', {contact})
    }

    render() {
        const { state } = this.context
        const { contactList } = state

        return (
            <Container>
                { this.searchMode ? //validate variable value
                    <SearchHeader/> :
                    <Header style= {appStyles.headerBackgroundColor}>
                        ...
                        <Right>
                            <Button 
                                transparent 
                                style={{marginRight:5}}
                                onPress={() => {
                                    this.setState({searchMode: true}) //set variable value
                                    console.log(this.searchMode)
                                }}>
                                <Icon type= 'Octicons' name= 'search'/>
                            </Button>
                            <PopupMenu type= 'main'/>
                        </Right>
                    </Header>
                }    
                <ContactList onContactAction={(id) => this.onContactAction(id)}/>
            </Container>
        )
    }
}

1 Ответ

3 голосов
/ 06 мая 2020

Есть две проблемы:

В вашем console.log отсутствует «состояние». 

console.log(this.state.searchMode)

Однако, если мы зарегистрируем его сейчас, вы получите устаревшее значение this.state.searchMode. Это потому, что setState асинхронный. Однако setState принимает обратный вызов во втором параметре, который будет вызываться после завершения setState, чтобы вы могли зарегистрировать новое состояние. Обновите свой onPress следующим образом: 

onPress={() => {
  this.setState({searchMode: true}, () => console.log(this.state.searchMode))
}}
...