setState（）如何取决于调用哪个组件函数？

Question

I want to set dynamic state depending on which function is called, I know if we can't setstate in render, but still i need to do that to set dynamic state,

there's some way to make it possible?

export default class Foo extends Component {
  constructor(props) {
    super(props);
    this.state={
      dynamicView:false
    }
  }
  renderText(key, value){
    this.setState({[key]:value})
    <Text>Simple render</Text>
  }
  renderButton(key, value){
    this.setState({[key]:value})
    <Text>Simple render</Text>
  }
  render(){
    return(
      <View>
        {this.state.dynamicView ? this.renderButton("button","ValueButton") : this.renderText("text", "valueText")}
        <Button
          title="change Component"
          onPress={()=>this.setState({dynamicView:!this.state.dynamicView})}
        />
        <Button
          title="Isi State"
          onPress={()=>alert(JSON.stringify(this.state,null,4))}
        />
      </View>
    )
  }
}

with those code I can set dynamic state, but the problem is while both of component function is called, i have two state (button and text) , i want to avoid that, so i just have 1 state (button / text) depending on which component is display,

how can i do that?

Note: this is just a simple use-case, all i need to know is to set state depend on which function is called

Answer 1

If you want to keep just either button or text state then you should consider changing the other state.

    renderText(key, value){
    this.setState({[key]:value})
    this.setState({button:false})
    <Text>Simple render</Text>
  }

Answer 2

I think you need to have another variable in state, and update that based on the function fired up based on the condition of dynamicView.

export default class Foo extends Component {
  constructor(props) {
  super(props);
   this.state={
     dynamicView:false,
     viewType:''
   }
 }
  renderText(viewType){
    this.setState(viewType)
    <Text>Simple render</Text>
  }

 renderButton(viewType){
   this.setState({viewType})
   <Text>Simple render</Text>
  }

 render(){
   return(
    <View>
     {this.state.dynamicView ? this.renderButton("button","ValueButton") : 
      this.renderText("text", "valueText")}
      <Button
       title="change Component"
       onPress={()=>this.setState({dynamicView:!this.state.dynamicView})}
       />
      <Button
       title="Isi State"
       onPress={()=>alert(JSON.stringify(this.state,null,4))}
      />
   </View>
  )
 }
}