1. ホーム
  2. javascript

[解決済み] react-native : 状態をレンダリングする方法

2022-03-03 16:08:32

質問

のレンダリングに問題があります。 state . 私の状態の初期値は empty が、ボタンを押すと state change .

この変更をすぐに確認したいのですが state だけ renders で何かを入力し始めると Textinput

これは私の状態です。

  constructor(props) {
    super(props)
    this.state = {
      noteText: '',
      userName:'',
  }
}

onPressボタンで状態を変更する

changeState(){
this.setState({userName:'Kevin'})
}

ここで私のStateをレンダリングします

    <View>
//I want to immediately render this.state.userName
       <Text>{this.state.userName}</Text>
          <TextInput
                    onChangeText={(noteText) => this.setState({noteText:noteText})}
                    value={this.state.noteText}
                    />
    </View>

に何かを入力し始めるまで、私の状態はレンダリングされません。 TextInput . どうすればすぐにレンダリングできるようになりますか?

どのように解決するのですか?

ここで2つの方法があります。

デフォルトの状態を設定します。

constructor(props) {
    super(props)
    this.state = {
      noteText: '',
      userName:'Kevin',
  }
  this.changeState = this.changeState.bind(this);
}

または呼び出し changeStatecomponentDidMount ,

componentDidMount(){
   this.changeState(); //bind this to changeState in constructor
}