根据条件反应本地变化状态

Question

我有一个名为"isMap"的状态项，它是一个默认设置为false的布尔值，在我的标题中，我有一种可触摸的不透明度，当按下时，它将把isMap切换到当前不是的布尔值。在我的渲染中，我有一个根据isMap值进行更改的条件逻辑，这非常有效。单击标题可触摸的不透明度会更改页面上的渲染内容。

但是，在我的header元素中，我无法使用在渲染中使用的相同方法来更改条件文本。我已尝试使用_isMounted，但仍然不起作用。

class NewPostInternal extends React.Component {
_isMounted = false;
static navigationOptions = ({ navigation }) => {
return {
title: 'Create',
headerRight: navigation.state.params && navigation.state.params.headerRight,
};
};
state = {
region: {},
coords: {},
isMap: false,
};
componentDidMount() {
this._isMounted = true;
if (this._isMounted) {
this.setHeader();
}
}
setHeader() {
const { isMap } = this.state;
this.props.navigation.setParams({
headerRight: (
<TouchableOpacity onPress={() => this.setState({
isMap: !this.state.isMap
})}>
<Image
source={require('../assets/icons/region.png')}
/>
///THIS DOESN'T WORK
{isMap
?
<Text>Shows if true (doesn't change)</Text>
:
<Text>Shows if false (doesn't change)</Text>
}
////
</TouchableOpacity>
),
});
}
}
componentWillUnmount() {
this._isMounted = false;
}

render() {
const { isMap } = this.state;
return (
<View>
{
isMap ?
<View> <Text> Shows if isMap is true (this works properly)</Text>
:
<View> <Text> Shows if isMap is false (this works properly)</Text>
}
</View>
);
}
}

Answer 1

我认为setHeader()函数只在componentDidMount()中运行一次。在这种情况下，传递给onPress的回调只会记住该上下文中this.state.isMap的即时值。

<TouchableOpacity onPress={() => this.setState({
isMap: !this.state.isMap // ===> this is always the initial value (false)
})}>
{isMap
?
<Text>Shows if true (doesn't change)</Text>
:
<Text>Shows if false (doesn't change)</Text>
}
</TouchableOpacity>

尝试使用react提供的状态作为this.setState()中的参数，如下所示：

<TouchableOpacity onPress={() => this.setState(({ isMap }) => ({ isMap: !isMap }))}>
{...}
</TouchableOpacity>

希望它能有所帮助！