我有点受不了,只是无法正常工作,我也发现了几个堆栈溢出链接,看来语法是正确的。
setEvent获取参数,如果我从对象破坏或仅发送几个字段,则该版本将冻结应用程序,它将说未定义。
任何帮助,我都会很高兴,自己也无法找出错误。
应该发送数据<TouchableOpacity onPress={(item) => this.setEvent(item)}>
一项只是具有属性ID和名称的一个对象。
import React from 'react';
import {View, FlatList, ActivityIndicator, Text, TouchableOpacity} from 'react-native';
import {server, defaultRequestSettings} from "../configuration";
import {styles} from '../styles/home_screen';
export default class HomeScreen extends React.Component {
state = {
loading: true
};
constructor(props) {
super(props);
this.setEvent = this.setEvent.bind(this);
}
componentDidMount() {
fetch(`${server}/data`, defaultRequestSettings)
.then((response) => response.json())
.then((responseJson) => {
this.setState({
loading: false,
dataSource: responseJson.events,
});
});
}
setEvent (item) {
console.log(item)
};
render() {
if (this.state.loading) {
return (
<View style={{flex: 1, padding: 20}}>
<ActivityIndicator/>
</View>
)
}
return (
<View style={styles.container}>
<FlatList
data={this.state.dataSource}
renderItem={({item}) =>
<TouchableOpacity onPress={(item) => this.setEvent(item)}>
<Text style={styles.item}>{item.name}</Text>
</TouchableOpacity>
}
keyExtractor={({id}) => `list-item-${id}`}
/>
</View>
);
}
}
答案 0 :(得分:1)
在构造函数中定义您的状态
constructor(props) {
super(props);
this.state = {
dataSource: [],
}
this.setEvent = this.setEvent.bind(this);
}
通过这种方式,dataSource的初始状态将是一个空数组,您还应该使用lodash,这将使您免于受到来自服务器的未定义响应的影响
import _ from 'lodash'
const dataSource = _.get(this.state, 'dataSource', [])
更新
像这样从onPress删除项目
onPress={() => this.setEvent(item)
因为它将item作为回调对象,由TouchableOpacity返回,所以您需要FlatList中的对象。