Question

我有2个组件，GetDebt和CurrencyFormat。 GetDebt使用fetch在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

您将值作为 CurrencyFormat 的支柱，要检索它，您应将其称为 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)})
  }

此外，您不需要在 AppRegistry 中注册所有课程，只需注册根类即债务

React Native将道具传递给子组件

1 个答案: