2017-11-20 11 views
1

州の値に小道具の値をどのように割り当てることができますか?React Native:状態に小道具の値を割り当てる

たとえば、以下のコンポーネントは、親コンポーネントからいくつかの値を小道具として取得します。このLogItemコンポーネントに渡さ

import React, { Component } from 'react'; 
import { StyleSheet, Text, View } from 'react-native'; 



export default class Logitem extends Component { 

    constructor(props) { 
    super(props); 
    const { logstringdate, bmi, weight, logdate } = this.props; 
    } 

    state = { 
    selecteddate: '', 
    selectedweight: '' 

    } 

onWeightClick =() => { 
    this.setState({ selecteddate: this.props.logdate }); 
    console.log('Value in props==>'+this.props.logdate); 
    console.log('The selecteddate in the state ==> '+ this.state.selecteddate); 
} 


render() { 

    return (
    <View style={styles.containerStyle}> 
       <View style={styles.headerContentStyle}> 
        <Text>{this.props.logstringdate}</Text> 
        <Text>{this.props.bmi}</Text> 
       </View> 
       <View style={styles.thumbnailContainerStyle}> 
        <Text onPress={this.onWeightClick}>{this.props.weight}</Text> 
       </View> 
    </View> 
); 

} 
}; 

const styles = { 
    containerStyle: { 
    borderWidth: 1, 
    borderRadius: 2, 
    borderColor: '#ddd', 
    borderBottomWidth: 0, 
    shadowColor: '#000', 
    shadowOffset: { width: 0, height: 2}, 
    shadowOpacity: 0.1, 
    shadowRadius: 2, 
    elevation: 1, 
    marginLeft: 5, 
    marginRight: 5, 
    marginTop:10, 
    }, 
    thumbnailContainerStyle: { 
    justifyContent: 'center', 
    alignItems: 'center', 
    marginLeft: 10, 
    marginRight: 10, 
    flexDirection: 'row' 

    }, 
    headerContentStyle: { 
    flexDirection: 'column', 
    justifyContent: 'space-around' 
    }, 
}; 

小道具logstringdate, bmi, weight, logdateあります。

私はプレスイベントで状態(selecteddate)を設定しています。

イベントはトリガーされていますが、何らかの理由でthis.setStateが機能していません(つまり、状態の値を小道具に割り当てていない)。

私は小道具が実際に渡され、それがヌルではないことを確認しました。

マイ出力

enter image description here

+1

コンストラクタの内部で '' onWeightClick結合しusre作り、 'this.state'内部のコンストラクタを移動し、SETSTATEが非同期 – Aaqib

+0

@AaqibあるようonWeightClick''へのコールバック関数を渡す:私は問題があると確認していませんハンドラ。ハンドラが呼び出されており、 "=()=>"はバインドするのにかなり同じです(afaik) –

+0

明示的に 'bind'の矢印関数を使う必要はありません。クラスインスタンス)。 –

答えて

4

まあそれsetStateは非同期ですので。それは実際に状態を直ちに更新するものではありません。
setStateの2番目の引数は、状態が設定された直後に呼び出されるコールバックです。

onWeightClick =() => { 
    this.setState({ selecteddate: this.props.logdate },() => { 

     console.log('Value in props==>' + this.props.logdate); 
     console.log('The selecteddate in the state ==> ' + this.state.selecteddate); 
    }); 
    } 
関連する問題