有条件地响应本机更改状态

Question

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

但是，在我的标题元素中，我无法使用渲染中使用的相同方法更改条件文本。 我试过使用 _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>

希望能帮助到你！