javascript - TypeError:stateInfo.map 不是函数 react-native
问题描述
请帮助我解决我正在使用 react-native 的地图错误。
TypeError: stateInfo.map is not a function react-native
我知道有类似的问题,但我不知道为什么会发生错误。应用程序崩溃(好像是一些长度问题)。
我究竟做错了什么?
这是组件:
import React, { useEffect, useState } from "react";
import {
StyleSheet,
Text,
View,
Image,
TouchableWithoutFeedback,
Dimensions,
Keyboard,
ActivityIndicator,
} from "react-native";
import { Icon, Input, Button } from "react-native-elements";
import { TouchableOpacity } from "react-native-gesture-handler";
import * as Animatable from "react-native-animatable";
import { auth } from "../firebase";
import "firebase/auth";
import { Picker } from "@react-native-picker/picker";
const Register = ({ navigation }) => {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [subSpinner, setSubSpinner] = useState(false);
const [stateInfo, setStateInfo] = useState({});
const [districtInfo, setDistrictInfo] = useState({});
const [selectedstate, setSelectedState] = useState();
const [selectedStateCode, setSelectedStateCode] = useState();
const login = () => {
navigation.navigate("Login");
};
const signIn = () => {
setSubSpinner(true);
auth
.signInWithEmailAndPassword(email, password)
.then(() => {
setSubSpinner(false);
})
.catch((err) => alert(err));
};
useEffect(() => {
fetch("https://cdn-api.co-vin.in/api/v2/admin/location/states")
.then((response) => response.json())
.then((data) => {
const getstate = data.states.map((state) => ({
name: state.state_name,
value: state.state_id,
}));
setStateInfo(getstate);
});
}, []);
console.log(stateInfo);
// useEffect(() => {
// fetch(
// `https://cdn-api.co-vin.in/api/v2/admin/location/districts/${stateInfo.state_id}`
// )
// .then((response) => response.json())
// .then((data) => {
// data.states.map((state) => setDistrictInfo(state));
// });
// }, []);
// console.log(districtInfo);
return (
<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
<View style={styles.container}>
<View style={{ flex: 1 }}>
<Image
style={{ flex: 1, width: null, marginTop: -100 }}
source={require("../assets/loginBg.jpg")}
/>
</View>
<Animatable.Text
style={styles.titleText}
animation="fadeInUp"
delay={100}
>
CoBed-India
</Animatable.Text>
<View style={styles.container2}>
<View style={styles.bottomView}>
<Text style={styles.loginText}>Login</Text>
<View style={styles.inputView}>
<Input
leftIcon={
<Icon
style={styles.inputIcon}
name="person"
type="ionicons"
color="black"
size={24}
/>
}
style={styles.input}
placeholder="Email"
value={email}
texttransform="uppercase"
onChangeText={setEmail}
autoCapitalize="none"
keyboardType="email-address"
textContentType="emailAddress"
/>
</View>
<View style={styles.inputView}>
<Input
leftIcon={
<Icon
style={styles.inputIcon}
name="lock"
type="ionicons"
color="black"
size={24}
/>
}
style={styles.input}
placeholder="Password"
value={password}
onChangeText={setPassword}
secureTextEntry={true}
autoCapitalize="none"
onSubmitEditing={signIn}
/>
</View>
<View style={styles.inputView}>
<Picker
selectedValue={selectedstate}
onValueChange={(itemValue, itemIndex) => (
setSelectedState(itemValue), setSelectedStateCode(itemIndex)
)}
>
{stateInfo.map((state) => (
<Picker.Item
label={state.name}
value={state.value}
></Picker.Item>
))}
</Picker>
</View>
<TouchableOpacity activeOpacity={0.5} style={styles.loginButton}>
<Button
raised
disabled={!email || !password}
onPress={signIn}
style={styles.loginButtonText}
title="Login"
/>
{subSpinner ? (
<ActivityIndicator
style={{ marginTop: 10 }}
invisible
size="large"
color="#ffab00"
/>
) : null}
</TouchableOpacity>
<Text style={styles.registerText}>
Don't have an account?
<Text onPress={login} style={{ color: "#5352ed" }}>
{" Login"}
</Text>
</Text>
</View>
</View>
</View>
</TouchableWithoutFeedback>
);
};
export default Register;
const styles = StyleSheet.create({
container: {
flex: 1,
},
container2: {
alignItems: "center",
justifyContent: "center",
},
titleText: {
position: "absolute",
top: Dimensions.get("screen").height * 0.1,
alignSelf: "center",
color: "#fff",
fontSize: 60,
elevation: 20,
},
input: {
height: 40,
flex: 1,
fontSize: 16,
color: "#333",
},
loginText: {
fontSize: 24,
marginTop: 12,
marginBottom: 14,
},
inputIcon: {
paddingHorizontal: 8,
},
inputView: {
height: 40,
marginTop: 10,
display: "flex",
flexDirection: "row",
alignItems: "center",
},
bottomView: {
backgroundColor: "#fff",
opacity: 0.95,
position: "absolute",
bottom: 0,
maxWidth: 700,
borderTopLeftRadius: 30,
borderTopRightRadius: 30,
paddingTop: 10,
paddingBottom: 20,
paddingHorizontal: 20,
},
loginButton: {
marginTop: 10,
},
loginButtonText: {
width: 400,
alignSelf: "center",
fontSize: 18,
},
registerText: {
alignSelf: "center",
marginTop: 12,
fontSize: 16,
},
fpTextd: {
marginTop: 10,
alignSelf: "flex-end",
fontSize: 16,
fontWeight: "bold",
color: "#9d9d9d",
},
fpTexte: {
marginTop: 10,
alignSelf: "flex-end",
fontSize: 16,
fontWeight: "bold",
color: "#5352ed",
},
});
解决方案
初始状态是一个没有功能stateInfo
的空对象 ( )。{}
.map
const [stateInfo, setStateInfo] = useState({});
将您的初始状态更新为数组 ( ),以便在初始渲染时调用[]
有效函数。.map
const [stateInfo, setStateInfo] = useState([]);
推荐阅读
- regex - 您能否让我知道如何在 splunk 中为 ABC1234 或 abc1234a 或 abc1234s 编写正则表达式?
- c# - 在 .NET Core 控制台应用程序中托管 Web API 和另一个自定义服务
- csv - 使用 BeanShell 后处理器时清空 csv 文件
- python - .loc 方法不采用 DataFrame 的列标签
- firefox - 如何让 Firefox 直接打开 RSS(像其他 XML 文件一样),而不是下载?
- angular - 如何在 ng bootstrap Datepicker 中从周日而不是周一开始日历周?
- angular - 页面上的角度吸气剂
- javascript - Netlify CMS 自定义小部件不适用于地图?
- c# - ListBox 清单 SelectedItem 返回 null
- javascript - 明确声明“movement”和“movement.endPosition”?