Entonces, seguí un tutorial para crear una aplicación meteorológica que obtiene datos de una API. El problema es que no quiero mostrar ningún dato hasta que el usuario escriba una ciudad en la entrada de búsqueda. Por el momento funciona bien, pero muestra "indefinido" como valor inicial cuando se carga la aplicación. ¿Cómo "oculto" el valor indefinido o cómo lo configuro en blanco?
Lo que obtengo como valor inicial
undefined, undefined, undefined undefined NaN°C undefinedmi código
function HomeScreen() { const initialValue = "zero"; const [input, setInput] = useState(''); const [data, setData] = useState([initialValue]); const [loading, setLoading] = useState(false); const api = { key: 'myKey', baseUrl: 'http://api.weatherapi.com/v1/', } const fetchDataHandle = useCallback(() => { setLoading(true); setInput(""); axios({ method: "GET", url: `http://api.weatherapi.com/v1/current.json?key=${api.key}&q=${input}&aqi=yes`, }) .then(res=> { console.log(res.data); setData(res.data); }) .catch(e => console.dir(e)) .finally(() => setLoading(false)); }, [api.key, input]); return ( <View style={styles.container}> <View> <TextInput placeholder='Enter city name...' onChangeText={text => setInput(text)} value={input} placeholderTextColor={'black'} style={styles.textInput} onSubmitEditing={fetchDataHandle} /> </View> {loading && ( <View> <ActivityIndicator size={'large'} color="#000" /> </View> )} {data && ( <View style={styles.infoView}> <Text style={styles.cityText}> {`${data?.location?.name}, ${data?.location?.region}, ${data?.location?.country}`} </Text> <Text style={styles.dateText}>{`${data?.location?.localtime}`}</Text> <Text style={styles.tempText}>{`${Math.round(data?.current?.temp_c)}°C`}</Text> <Text style={styles.conditionText}>{`${data?.current?.condition?.text}`}</Text> <Image style={styles.imageIcon} source={{uri: `${data?.current?.condition?.icon}`}} /> </View> )} </View> ); }Puede usar una característica llamada fusión nula ( ?? ). Para ver cómo funciona:
const foo = null ?? "default string"; const foo1 = undefined ?? "default string"; Si el valor del lado izquierdo es null o undefined , la expresión devolverá el valor del lado derecho. En este caso, tanto foo como foo1 son "default string" . En tu caso,
`${data?.location?.name ?? ""}` Al hacer esto, se mostrará una cadena vacía (por lo que no se verá nada) o el valor de data.location.name si está definido. Esto se puede utilizar en todos los casos anteriores.