React Native의 하위 구성 요소에 소품을 보낼 수 없습니다.

Question

달러 뷰 구성 요소에 소품을 보내고 싶지만 알 수없는 이유로 실패합니다. 이 문제를 테스트하기 위해 DollarView 구성 요소의 dollarValue 소단위를 표시하기 위해 경고를 사용했지만 (이 코드 줄은 DollarView 구성 요소에 사용했습니다 : Alert.alert(this.props.dollarValue.toString());), 앱을 새로 고침하면 전체 앱이 중지되고이 오류가 발생합니다.

TypeError: undefined is not an object (evaluating '_this.props.dollarValue.toString')

export default class App extends Component { 

    constructor(props) { 
    super(props); 
    this.updateDollar = this.updateDollar.bind(this); 
    this.state = { 
     value: 0, 
     date: 0, 
     isReady: 'need to update' 
    }; 
    } 

    componentWillMount() { 
    var savedData = (async function init() { 
     var value = await AsyncStorage.getItem('value'); 
     if (!value) { 
     value = 0; 
     } else { 
     value = parseInt(value); 
     } 
     var date = Date.parse(await AsyncStorage.getItem('date')); 
     return [value, date]; 
    }()); 
    this.setState({ 
     value: savedData[0], 
     date: savedData[1] 
    }); 
    } 

    updateDollar() { 
    this.setState({ 
     isReady: false 
    }); 
    axios.get('https://digiarz.com/webservice/api/') 
     .then(async (response) => { 
     var dollarRate = response.data.BTC.rates.USD.rate; 
     var tomanRate = response.data.BTC.rates.TMN.rate; 
     var dollar = Math.round(tomanRate/dollarRate) * 10; 
     var newDate = new Date(); 
     await AsyncStorage.setItem('value', dollar.toString()); 
     await AsyncStorage.setItem('date', newDate.toString()); 
     this.setState({ 
      value: dollar, 
      date: newDate, 
      isReady: true 
     }); 
     }) 
     .catch((error) => { 
     Alert.alert('خطا', 'خطا در دسترسی به اطلاعات. لطفا اتصال اینترنت خود را بررسی نمایید.'); 
     this.setState({ 
      isReady: 'failed' 
     }); 
     }); 
    } 

    render() { 
    var {value, date, isReady} = this.state; 
    return (
     <View style={styles.container}> 
     <DollarView isReady={isReady} dollarValue={value} date={date} /> 
     <DollarCalculator onUpdate={this.updateDollar} dollarValue={value} /> 
     </View> 
    ); 
    } 
} 

그리고 DollarView 구성 요소 :

class DollarView extends Component { 

     constructor(props) { 
      super(props); 
      this.state = { 
       dollarValue: 0, 
       value: 0, 
       date: 0, 
       isReady: true 
      }; 
     } 

     componentWillReceiveProps(nextProps) { 
      var {dollarValue, value, date, isReady} = nextProps; 
      this.setState({ 
       dollarValue: dollarValue, 
       value: value, 
       date: date, 
       isReady: isReady 
      }); 
     } 

     render() { 
      var {dollarValue, date, isReady} = this.state; 
      if (isReady == 'failed') { 
       var indicator = <Text style={styles.failed}>{dollarValue}</Text>; 
      } else if (isReady) { 
       var indicator = <Text style={styles.success}>{dollarValue}</Text>; 
      } else { 
       var indicator = <ActivityIndicator size={75} color="#0000ff" />; 
      } 
      return (
       <View> 
        {indicator} 
       </View> 
      ); 
     } 
    } 

같은 일이 happe

이

내 코드입니다 ns DollarCalculator 구성 요소도 있습니다.

Answer 1

코드의 asyncawait 쌍이 의도 한대로 작동하지 않았습니다.

saveData은 약속이므로, saveData[0]은 정의되지 않았으므로 오류가 발생했습니다.

는 대신이 작업을 수행 할 수 있습니다

:

async componentWillMount() { 
    var value = await AsyncStorage.getItem('value'); 
    if (!value) { 
    value = 0; 
    } else { 
    value = parseInt(value); 
    } 
    var date = Date.parse(await AsyncStorage.getItem('date')); 
    this.setState({ 
    value, 
    date, 
    }); 
}