React-Native: Состояние изменено, но возвращает старое значение

Question

У меня есть два компонента. Существует кнопка на Componenta, при нажатии на него, он изменяет состояние:

import ComponentB from './ComponentB' 
 
. 
 
. 
 
constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     filter: true, 
 
    }; 
 
} 
 
. 
 
. 
 
. 
 
<TouchableOpacity 
 
    onPress={()=>{ this.setState({filter: !this.state.filter }); }} 
 
> 
 
    {this.state.filter ? 
 
     <Text>Enabled</Text> : 
 
     <Text>Disabled</Text> 
 
    } 
 
</TouchableOpacity> 
 
. 
 
. 
 
. 
 
<ComponentB filter={this.state.filter} />

ComponentB 
 

 
render(){ 
 
    return(
 
     <View><Text>{this.props.filter}</Text></View> 
 
    ); 
 
}

Забавно, когда вы нажимаете на кнопку , состояние действительно меняется, и текст, который основан на состоянии, также изменится. Поэтому в первый раз он изменяется от True до False. Но ComponentB получит еще True вместо False. Когда вы нажмете на него снова, состояние изменится с False на True, текст также отображается правильно, но на этот раз ComponentB получит True вместо False. Я передаю реквизиты ComponentB неправильно? Я что-то упускаю?

Заранее спасибо.

Answer 1

Извлеките свой SetState из вида;

import ComponentB from './ComponentB' 
 
. 
 
. 
 
constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     filter: true, 
 
    }; 
 
} 
 
changeFilter =() => { this.setState({filter: !this.state.filter }); }; 
 
. 
 
. 
 
. 
 
<TouchableOpacity 
 
    onPress={()=> this.changeFilter(); } 
 
> 
 
    {this.state.filter ? 
 
     <Text>Enabled</Text> : 
 
     <Text>Disabled</Text> 
 
    } 
 
</TouchableOpacity> 
 
. 
 
. 
 
. 
 
<ComponentB filter={this.state.filter} />

Answer 2

Вам необходимо пройти состояние в на onPress

как

import ComponentB from './ComponentB' 
 
. 
 
. 
 
constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     filter: true, 
 
    }; 
 
} 
 
changeFilter = (filter) => { this.setState({filter: !filter }); }; 
 
. 
 
. 
 
. 
 
<TouchableOpacity 
 
    onPress={()=> this.changeFilter(this.state.filter); } 
 
> 
 
    {this.state.filter ? 
 
     <Text>Enabled</Text> : 
 
     <Text>Disabled</Text> 
 
    } 
 
</TouchableOpacity> 
 
. 
 
. 
 
. 
 
<ComponentB filter={this.state.filter} />

Answer 3

ComponentB

state = { 
filter: this.props.filter 
} 

componentWillReceiveProps(nextProps) { 
if(this.props.filter !== nextProps.filter){ 
    this.setState({ 
    filter: nextProps.filter 
    }) 
} 
} 

render(){ 
return(
    <Text>{this.state.filter}</Text> 
); 
} 

это может решить вашу проблему с реквизитом, не обновляющимся при изменении состояния родителя.