Question

我正在开发一个爱好项目，我在其中开发了一个显示天气详情的按钮。现在我正在尝试更改它而不是在印刷机上显示它，我希望通过从数据库中获取Zipcode来直接显示它。

我尝试使用onLoad但它没有用。以下是我正在使用的代码行。

基于Weather API的详细信息 -

getWeather() {
        Keyboard.dismiss()
        //Here I am fetching the Pincode from DB
        this.state.zip = (this.state.userDetails && this.state.userDetails.Details[0].Pincode)
        if(this.state.zip) {
            axios.get(`https://api.openweathermap.org/data/2.5/weather?zip=${this.state.zip},in&appid=e47bb9af0d6413b22b1f1cbe3edfca63&units=metric`)
            .then((response) => {
                this.setState({ data:response.data })
            })
            .catch((err) => {
                console.log(err)
            })
        } else {
            Alert.alert('Error', 'Please enter ZIP Code',
            [{ text:'Okay', style:'cancel' }])
        }
    }

    renderDetails() {
        if(this.state.data) {
            return (
                <View View style={{ flex:7 }}>
                    <Text style={{ fontWeight: "bold", fontSize:20, textAlign:'center', color: '#000' }}>{this.state.data.name}</Text>
                    <View style={{ marginLeft:40 }}>
                        <Text style={{ color: '#000'  }}>Forecast : {this.state.data.weather[0].main}</Text>
                        <Text style={{ color: '#000'  }}>Temperature : {this.state.data.main.temp}</Text>
                        <Text style={{ color: '#000'  }}>Temp Max : {this.state.data.main.temp_max}</Text>
                        <Text style={{ color: '#000'  }}>Temp Min : {this.state.data.main.temp_min}</Text>
                    </View>

                </View>
            )
        } else {
            return null
        }
    }

使用基于输入的邮政编码显示数据 -

        <View style={styles.container}>
        <Text style={{ fontWeight: "bold", fontSize:22, textAlign:'center', color: '#000' }}>Weather Details</Text>
            <View style={{ flex:3, justifyContent:'center', alignItems:'center'}}>
                <Input
                    value={this.state.zip}
                    placeholder="Enter ZIP Code"
                    onChangeText={(zip) => {
                        this.setState({ zip })
                    }}
                />
                <Button customButtonStyle={{ flex:1, width:'50%', alignSelf:'center', height:40, width: '50%' }} onPress={() => { this.getWeather() }}>SUBMIT</Button>
            </View>
            { this.renderDetails() }
        </View>

现在，如何在点击按钮操作中替换它并直接显示详细信息？

如何使用onLoad而不是onPress并显示数据？

0 个答案: