为什么 object prop 没有显示在 Flat List 中?
Why does object prop doesn't show in Flat List?
this.state={
task : "",
the_array : []
};
}
handleTextChange=(some_task) =>{
this.setState({
task : some_task
});
}
pushToList = () => {
let taskitem = {
name: this.state.task,
};
this.setState({
the_array: [...this.state.the_array, taskitem],
});
}
render() {
return(
<View style={{backgroundColor:'powderblue', height:'100%'}}>
<FlatList data = {this.state.the_array}
renderItem={(item) => <Text>{item.name}</Text>} keyExtractor={(item) => item.name} >
</FlatList>
<TextInput style={{ backgroundColor: 'lightsteelblue', height:60, borderRadius : 25, marginBottom:20}}
onChangeText={this.handleTextChange}>
</TextInput>
<TouchableOpacity style={{
backgroundColor: 'mediumpurple', height: 60, width: 80, alignSelf: 'center', borderRadius: 20, justifyContent: 'center',
alignItems: 'center', marginBottom:20
}} onPress={this.pushToList}>
这是我 code.I 正在尝试将 Textinput 内容添加到 Flatlist。为此,我在我的按钮 onPress 方法 ('pushToList') 中定义了一个对象,名为 'taskitem',并为其设置了一个名为 'name' 的道具。
'pushTolistMethod' 应该将 'name' 放入屏幕上的平面列表中。但奇怪的是它不起作用,当我按下按钮时什么也没有发生。我想知道是否有人可以帮助我。
你能像这样替换你的 flatlist 代码并试试吗?
<FlatList data = {this.state.the_array}
renderItem={({ item }) => <Text>{item.name}</Text>} keyExtractor={(item) => item.name} >
</FlatList>
数据在项目键上,因此我们使用解构从函数内部访问它。
this.state={
task : "",
the_array : []
};
}
handleTextChange=(some_task) =>{
this.setState({
task : some_task
});
}
pushToList = () => {
let taskitem = {
name: this.state.task,
};
this.setState({
the_array: [...this.state.the_array, taskitem],
});
}
render() {
return(
<View style={{backgroundColor:'powderblue', height:'100%'}}>
<FlatList data = {this.state.the_array}
renderItem={(item) => <Text>{item.name}</Text>} keyExtractor={(item) => item.name} >
</FlatList>
<TextInput style={{ backgroundColor: 'lightsteelblue', height:60, borderRadius : 25, marginBottom:20}}
onChangeText={this.handleTextChange}>
</TextInput>
<TouchableOpacity style={{
backgroundColor: 'mediumpurple', height: 60, width: 80, alignSelf: 'center', borderRadius: 20, justifyContent: 'center',
alignItems: 'center', marginBottom:20
}} onPress={this.pushToList}>
这是我 code.I 正在尝试将 Textinput 内容添加到 Flatlist。为此,我在我的按钮 onPress 方法 ('pushToList') 中定义了一个对象,名为 'taskitem',并为其设置了一个名为 'name' 的道具。 'pushTolistMethod' 应该将 'name' 放入屏幕上的平面列表中。但奇怪的是它不起作用,当我按下按钮时什么也没有发生。我想知道是否有人可以帮助我。
你能像这样替换你的 flatlist 代码并试试吗?
<FlatList data = {this.state.the_array}
renderItem={({ item }) => <Text>{item.name}</Text>} keyExtractor={(item) => item.name} >
</FlatList>
数据在项目键上,因此我们使用解构从函数内部访问它。