传递参数以响应本地onPress事件,应用程序冻结或数据未定义

时间:2018-11-03 20:32:30

标签: reactjs react-native expo

我有点受不了,只是无法正常工作,我也发现了几个堆栈溢出链接,看来语法是正确的。

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>
    );
}

}

1 个答案:

答案 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中的对象。