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

【问题标题】：React Native Changing State Condtionally有条件地响应本机更改状态
【发布时间】：2020-04-02 19:39:05
【问题描述】：

我有一个名为“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>
    );
  }
}

【问题讨论】：

标签： reactjs react-native state

【解决方案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>

尝试在this.setState()中使用react提供的状态作为参数，像这样：

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

希望对你有帮助！

【讨论】：