は、私は2つの成分、GetDebtとCurrencyFormatを持っている子コンポーネント

Question

にネイティブ渡す小道具を反応します。 GetDebtはComponentWillMount中にtreasurydirect.govからデータをつかむためにフェッチ使用しています。デバッガでは、私は、データが決して再レンダリングなかっますCurrencyFormatの私のchiildコンポーネントによって、返されることがわかります。私は何か基本的なことを逃しているように感じる。何か案は？

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

export default class debt extends Component { 
    render() { 
    return (
     <View style={styles.container}> 
     <GetDebt></GetDebt> 
     </View> 
    ); 
    } 
} 

export class CurrencyFormat extends Component { 
    constructor(props){ 
    super(props); 
    // Set the initial state for the value 
    this.state = { 
     value: 0, 
     money: 0, 
    }; 
    } 

    componentDidMount(){ 
    this.setState({ 
     money: '$' + Number(this.state.value).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'), 
     value: Number(this.state.value).toFixed(2)}) 
    } 
    // This class formats currency in standard and creative ways 
    render() { 
    console.log("Value: " + this.state.value); 

    // Check the value is not 0 
    if(this.state.value != 0.00) { 
     return (
     <Text style={styles.welcome}>{this.state.value}</Text> 
    ); 
    } 
    // Show loading... 
    else { 
     return(
     <Text style={styles.welcome}>Loading...</Text> 
    ) 
    } 
    } 
} 

class GetDebt extends Component { 
    constructor(props){ 
    super(props); 
    this.state = { 
     debt: 0, 
     publicDebt: 0, 
     governmentHoldings: 0, 
     effectiveDate: new Date(), 
    }; 
    } 
    componentWillMount(){ 
    // Get the overall debt numbers 
    fetch('https://www.treasurydirect.gov/NP_WS/debt/current?format=json') 
     .then((response) => response.json()) 
     .then((responseJson) => { 
      this.setState({debt: responseJson.totalDebt},() => { 
      console.log("Debt: " + this.state.debt); 
      this.forceUpdate(); 
      }); 
      console.log(this.state); 
     }) 
     .catch((error) => { 
      console.error(error); 
     }) 
    } 

    render(){ 
    if(this.state.debt != 0) { 
     return (
     <View style={styles.container}> 
      <Text style={styles.title}>US Total Debt</Text> 
      <CurrencyFormat value={this.state.debt} /> 
     </View> 
    ); 
    } else { 
     return (
     <View style={styles.container}> 
      <Text style={styles.title}>Loading...</Text> 
     </View> 
    ); 
    } 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#F5FCFF', 
    }, 
    welcome: { 
    fontSize: 20, 
    textAlign: 'center', 
    margin: 10, 
    }, 
    instructions: { 
    textAlign: 'center', 
    color: '#333333', 
    marginBottom: 5, 
    }, 
    title: { 
    textAlign: 'center', 
    fontSize:40, 
    marginBottom: 5, 
    }, 
}); 

AppRegistry.registerComponent('debt',() => debt); 
AppRegistry.registerComponent('GetDebt',() => GetDebt); 
AppRegistry.registerComponent('CurrencyFormat',() => CurrencyFormat); 

Answer 1

あなたはまた、あなたは登録する必要はありませんthis.props.value

componentDidMount(){ 
    this.setState({ 
     money: '$' + Number(this.props.value).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'), 
     value: Number(this.props.value).toFixed(2)}) 
    } 

としてそれを呼び出す必要があり、それを取得するには、CurrencyFormatに小道具として値を渡していますAppRegistry内のすべてのクラスは、ちょうど私はそれがSIM何かを知っていた