为什么当状态改变时React Native组件不重新呈现

Question

我想动态更改元素的display属性。我创建了一个组件，但是当状态更新时它不会重新呈现。我知道函数toggleDisplay会执行，因为它将displayState记录到控制台中。我想念什么？

  class DetailedInfo extends Component {

    constructor(props) {
      super(props);
   
      this.state = {
        displayState: 'flex',
      };
    }

      toggleDisplay = () => {
          if (this.state.displayState=='flex') {
              this.setState(state => ({displayState: 'none'}))
          } else {
            this.setState(state => ({display: this.state.toggleDisplay}))
          }

          console.log(this.state.displayState);
          this.forceUpdate()
      }

      render() {
        return (
              <ScrollView>
                  <TouchableWithoutFeedback onPress={this.toggleDisplay}>
                      <View style={{backgroundColor: 'blue', height: 500}}>
                          <Text style={{display: 'flex'}}>
                          Lorem Ipsum
                          </Text>
                      </View>
                  </TouchableWithoutFeedback>
              </ScrollView>
        )
      }
  };

Answer 1

1. 您没有将状态变量用于样式

<Text style={{display: this.state.dispalyState }}>

1. 稍微更改切换显示方法

  toggleDisplay = () => {
      if (this.state.displayState=='flex') {
          this.setState({displayState: 'none'})
      } else {
        this.setState({displayState: 'flex'}))
      }

      console.log(this.state.displayState);
      this.forceUpdate()
  }