我想将道具发送到DollarView组件,但由于未知原因它失败。测试这个问题我用了一个警报显示DollarView组件的dollarValue道具(我用这行代码在DollarView组件:Alert.alert(this.props.dollarValue.toString());
),但在应用程序刷新,整个应用程序停止,我得到这个错误:无法将道具发送到React Native中的子组件
TypeError: undefined is not an object (evaluating '_this.props.dollarValue.toString')
这是我的代码:
<code class="prettyprint-override">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> ); } } </code>
而且DollarView组件:
<code class="prettyprint-override">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> ); } } </code>
同样的事情Happe的ns也有DollarCalculator组件。
===========解决方案如下:
async
await
对在您的代码没有按照您的意图工作。
saveData
是一个承诺,所以saveData[0]
是未定义的,这就是为什么你得到你的错误。
你可以这样做,而不是:
<code class="prettyprint-override">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, }); } </code>