javascript - 不变违规文本字符串必须在 组件内呈现

Question

很抱歉打扰您，但我正在努力学习 React-Native。我正在尝试制作一个天气应用程序，但出现此错误:

Text strings must be rendered within a <Text> component.
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:4137:8 in <anonymous>
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:4134:2 in createTextInstance
- ... 9 more stack frames from framework internal

这是我的两个代码文件:

天气卡.js

import React, {Component} from "react";
import {Animated, View, Text, PanResponder, Image} from "react-native";
import {
    widthPercentageToDP as wp,
    heightPercentageToDP as hp
} from "react-native-responsive-screen";

const CARD_INITIAL_POSITION_Y = hp("80%");
const CARD_INITIAL_POSITION_X = wp("5%");
const TRESHOLD_TO_TOP = hp("75%");
const TRESHOLD_TO_BOTTOM = hp("70%");
const CARD_OPEN_POSITION = hp("45%");
const MAX_DRAG_ZONE_WHEN_OPEN = hp("65%");
const ICON_URL = "http://openweathermap.org/img/w/";


class WeatherCard extends Component {
    state = { panResponder : undefined, isOpen: false};
    componentDidMount() {
        this.position = new Animated.ValueXY();
        this.position.setValue({x:CARD_INITIAL_POSITION_X, y: CARD_INITIAL_POSITION_Y});
        const panResponder = PanResponder.create({
            onStartShouldSetPanResponder:() => true,
            onPanResponderMove:(e,gesture) => {
                if(!(this.state.isOpen && gesture.y0 > MAX_DRAG_ZONE_WHEN_OPEN)) {
                    this.position.setValue({
                        x:CARD_INITIAL_POSITION_X,
                        y: gesture.moveY
                    });

                }

            },
            onPanResponderRelease:(e, gesture) => {
                if (!this.state.isOpen){
                    if(gesture.moveY <= TRESHOLD_TO_TOP) {
                        this.setOpenPosition(() => this.setState({isOpen: true}));
                    } else {
                        this.resetPosition();
                    }

                } else {
                    if(gesture.moveY <= TRESHOLD_TO_BOTTOM){
                        this.setOpenPosition()
                    } else {
                        if(gesture.y0 < MAX_DRAG_ZONE_WHEN_OPEN){
                            this.resetPosition(() => this.setState({isOpen: false}))
                        }

                    }

                }
            }
        });
        this.setState({panResponder})
    }
    setOpenPosition = (done) => {
        Animated.spring(this.position, {
            toValue: {x: CARD_INITIAL_POSITION_X, y : CARD_OPEN_POSITION}
        }).start(() => done && done());
    };

    resetPosition = (done) => {
        Animated.spring(this.position, {
            toValue: {x: CARD_INITIAL_POSITION_X, y : CARD_INITIAL_POSITION_Y}
        }).start(() => done && done())
    };
    getCardStyle() {
        return {
            width: wp("90%"),
            height: hp("110%"),
            borderRadius: 10,
            zIndex: 2,

            backgroundColor: "white",
            elevation: 1,
            shadowColor: "black",
            shadowOpacity: 0.2,
            shadowOffset: { height: 2, width: 2 },

            position: "absolute",
            left: CARD_INITIAL_POSITION_X,
            padding: hp("2%"),
            ...this.position.getLayout()
        };
    }
    renderHeader(){
       return (
           <View
               style={{
                   justifyContent: "center",
                   alignItems: "center"
               }}
           >

               <Text style={{ fontSize: 30, marginBottom: hp("1%") }}>
                   {this.props.currentWeather.name}
               </Text>
               <View style={{ flexDirection: "row" }}>
                   <Text style={{ marginTop: hp("1%"), fontSize: 35 }}>
                       {this.props.currentWeather.main.temp}
                   </Text>
                   <Image
                       style={{ height: 60, width: 60 }}
                       source={{
                           uri: `${ICON_URL}${this.props.currentWeather.weather[0].icon}.png`
                       }}
                   />
               </View>
           </View>
       )
    }
    render() {
        return this.state.panResponder ? <Animated.View {...this.state.panResponder.panHandlers} style={this.getCardStyle()}> {this.renderHeader()} </Animated.View> : <View />;
    }
}

export default WeatherCard;

和 search-screen.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import MapView from 'react-native-maps';
import {SearchBar} from "react-native-elements";
import {
    widthPercentageToDP as wp,
    heightPercentageToDP as hp
} from "react-native-responsive-screen";
import {connect} from "react-redux";
import {getCurrentWeatherByCity} from "../actions/index";
import WeatherCard from "../components/weather-card";

const DEFAULT_COORD = {
    lat: 48.859268,
    lng: 2.347060
};
class SearchScreen extends React.Component {
    state={search: ""};
    updateSearch = search => {
        this.setState({search})
    };
    submitSearch = () => {
        this.props.getCurrentWeatherByCity(this.state.search);
        console.log(this.state.search)
    };
    render() {
console.log(this.props.currentWeather);
        return (
            <View style={styles.container}>
                <MapView style={{flex : 1}}
                         region={{latitude : this.props.currentWeather ? this.props.currentWeather.coord.lat : DEFAULT_COORD.lat, longitude : this.props.currentWeather ? this.props.currentWeather.coord.lon : DEFAULT_COORD.lng, latitudeDelta: 0.2000, longitudeDelta: 0.1000}}
                         scrollEnabled={false}
                         liteMode={true} />
                {this.props.currentWeather && <WeatherCard currentWeather={this.props.currentWeather} />}
                <SearchBar
                    lightTheme
                    onChangeText={this.updateSearch}
                    value={this.state.search}
                    onSubmitEditing={this.submitSearch}
                    containerStyle={{
                        position: "absolute",
                        bottom: hp("50%"),
                        left: wp("5%"),
                        width: wp("90%")

                    }}/>



            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1

    },
});
const mapStateToProps = (store) => {
    return {
        currentWeather : store.weather.currentWeather
    }
};
const mapDispatchToProps = {
    getCurrentWeatherByCity
};
export default connect(mapStateToProps, mapDispatchToProps)(SearchScreen)

我问自己问题是否可能是:

{this.props.currentWeather && <WeatherCard currentWeather={this.props.currentWeather} />}

因为它不在文本组件内...如果您能提供帮助，那就太好了:D

如果您需要其他资源，请不要犹豫!

提前致谢:)

Answer 1

可能是因为这个尝试这个:

改变

 {this.props.currentWeather.name}

至

{this.props.currentWeather.name != undefined ? this.props.currentWeather.name : null}

对 {this.props.currentWeather.main.temp} 执行上述操作

希望这有帮助!