[英]TypeError: undefined is not an object (evaluating ' _this.setState')
i'm a complete beginner to React Native and i'm trying to add items to flatlist using textinput.我是 React Native 的完整初学者,我正在尝试使用 textinput 将项目添加到平面列表。 i keep constantly getting a TypeError: undefined is not an object (evaluating'_this.setState').
我不断收到 TypeError: undefined is not an object (评估'_this.setState')。 i have edited the code many times and tried to research what i can do, but it still is not working properly.
我已经多次编辑代码并试图研究我能做什么,但它仍然无法正常工作。 could someone help me and tell me what i need to change?
有人可以帮助我并告诉我我需要改变什么吗? below is my code.
下面是我的代码。 thank you in advance!
先感谢您!
import React, { useState, setState } from 'react';
import { View, Text, StyleSheet, FlatList, Alert, TouchableOpacity, TextInput } from 'react-native';
export default function FlatlistComponent({ }) {
const array = [{title: 'ONE'}, {title: 'TWO'}];
const [arrayHolder] = React.useState([]);
const [textInputHolder] = React.useState('');
const componentDidMount = () => {
setState({ arrayHolder: [...array] })
}
const joinData = () => {
array.push({ title : textInputHolder });
this.setState({ arrayHolder: [...array] });
}
const FlatListItemSeparator = () => {
return (
<View
style={{
height: 1,
width: "100%",
backgroundColor: "#607D8B",
}} />
);
}
const GetItem = (item) => {
Alert.alert(item);
}
return (
<View style={styles.MainContainer}>
<TextInput
placeholder="Enter Value Here"
onChangeText={data => this.setState({ textInputHolder: data })}
style={styles.textInputStyle}
underlineColorAndroid='transparent'
/>
<TouchableOpacity onPress={joinData} activeOpacity={0.7} style={styles.button} >
<Text style={styles.buttonText}> Add Values To FlatList </Text>
</TouchableOpacity>
<FlatList
data={arrayHolder}
width='100%'
extraData={arrayHolder}
keyExtractor={(index) => index.toString()}
ItemSeparatorComponent={FlatListItemSeparator}
renderItem={({ item }) => <Text style={styles.item} onPress={GetItem.bind(this, item.title)} > {item.title} </Text>}
/>
</View>
);
}
So I see you're trying to use functional components here.所以我看到你在这里尝试使用功能组件。 State variables can be rewritten like this
State 变量可以这样改写
const [arrayHolder, setArrayHolder] = useState([]);
const [textInputHolder, setTextInputHolder] = useState('');
componentDidMount is used in class components and can be rewritten like this for functional components componentDidMount 用在 class 组件中,对于功能组件可以这样改写
import React, { useState, useEffect } from 'react';
useEffect(()=>{
setArrayHolder(array)
}, [])
Function joinData
can be re-written like this. Function
joinData
可以这样改写。
const joinData = () => {
array.push({ title : textInputHolder });
setArrayHolder(array)
}
About the text not showing up.关于没有显示的文字。 You're using
this.setState
in the onChangeText
event.您在
onChangeText
事件中使用this.setState
。 It is a functional component and this
won't work in a functional component.它是一个功能组件,
this
在功能组件中不起作用。 state
variables are declared and set using the useState
hook in a functional component. state
变量是使用函数组件中的useState
挂钩声明和设置的。
You should rewrite the onChangeText event like this.您应该像这样重写 onChangeText 事件。
<TextInput
placeholder="Enter Value Here"
onChangeText={data => setTextInputHolder(data)}
style={styles.textInputStyle}
underlineColorAndroid='transparent'
/>
I think this'll solve your problem我想这会解决你的问题
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.