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

上传递状态

像

＆＃13;

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

＆＃13;

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

这可能会解决您在父状态发生变化时不更新道具的问题。

React-Native：状态已更改，但返回旧值

3 个答案: