为什么 state 上的 React Native 组件不重新渲染

Question

I want to dynamically change display property of an element. I created a component, but it doesn't rerender, when state is updated. I know that function toggleDisplay executes, as it logs displayState to the console. What am I missing?

  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. you are not using the state variable for style

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

2. Change toggle display method slightly

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

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