Question

当我尝试调用_setCategories函数时，会出现问题。我从Modal里面的ListView里面的TouchableHighlight的onpress上调用它。我尝试按照其他线程上的建议绑定构造函数中的函数但没有成功。我错过了什么？我是新来的本地人。

谢谢。

所以这是我的一段代码。

constructor(props) {
    super(props);

    this.state = {
        ...
    };

    this._setCategories = this._setCategories.bind(this);
    this._renderItemCategoryFilter = this._renderItemCategoryFilter.bind(this);
    this._onPress = this._onPress.bind(this);

}

_setCategories(categoriesArray, categoryId) {
    if (categoryId == null) {
        let totalListings = 0;
        categoriesArray.forEach(function(category) {
           totalListings += category.numberOfListings;
        });

        this.state.currentCategory = {
            name: 'All listings',
                numberOfListings: totalListings,
                subcategories: categories
        };
    }
    else
    {
        categoriesArray.forEach(function(category) {
            if (category.id == categoryId) {
                this.state.currentCategory = category;
            }
            else if (category.subcategories != null) {
                this._setCategories(category.subcategories, categoryId)
            }
        });
    }
}




_onPress(category)  {
    this._setCategories(categories, category.id);

    console.log(this.state.currentCategory.name);

}

_renderItemCategoryFilter({item, index}) {
    return (
        <View>

            <TouchableHighlight
                activeOpacity={0.5}
                onPress={() => this._onPress(item)}

            >
                <View style={{
                    flexDirection: 'row',
                    height: 35,
                }}>
                    <Text style={{
                        marginLeft: 5,
                        textAlignVertical: 'center',
                    }}>{item.name}</Text>
                    <Text style={
                        {
                            textAlignVertical: 'center',
                            height: 35,
                            position: 'absolute',
                            right:5
                        }
                    }>{item.numberOfListings}</Text>
                </View>
            </TouchableHighlight>
            <Divider/>
        </View>
    )
} ;

和渲染

<Modal style={[styles.modal]} swipeToClose={true} swipeArea={50} position={"bottom"} ref={"modal1"}>
                <View style={{
                    backgroundColor: '#FFFFFF',
                    alignItems: 'center',
                    justifyContent: 'center',
                    width: width / 2 + 100,
                    height: 40,
                    }}>
                    <Text style={{fontWeight: 'bold'}}>{this.state.currentCategory.name}</Text>
                    <Text style={{fontWeight: 'bold'}}>{`${this.state.currentCategory.numberOfListings} result${this.state.currentCategory.numberOfListings == 1 ? '' : 's' }`} </Text>
                </View>
                <Divider/>
                <ScrollView style={styles.scrollViewCategories}>
                    <FlatList
                        data={this.state.currentCategory.subcategories}
                        style={styles.flatList}
                        keyExtractor={(item, index) => index}
                        renderItem={(item, index) => this._renderItemCategoryFilter(item, index)}
                    />
                </ScrollView>
            </Modal>

Answer 1

快速修复将使用箭头函数表达式。

constructor(props) { super(props); this.state = { ... }; } _setCategories = (categoriesArray, categoryId) => { if (categoryId == null) { let totalListings = 0; categoriesArray.forEach(function(category) { totalListings += category.numberOfListings; }); this.state.currentCategory = { name: 'All listings', numberOfListings: totalListings, subcategories: categories }; } else { categoriesArray.forEach(function(category) { if (category.id == categoryId) { this.state.currentCategory = category; } else if (category.subcategories != null) { this._setCategories(category.subcategories, categoryId) } }); } } _onPress= (category) => { this._setCategories(categories, category.id); console.log(this.state.currentCategory.name); } _renderItemCategoryFilter = ({item, index}) => { return ( <View> <TouchableHighlight activeOpacity={0.5} onPress={() => this._onPress(item)} > <View style={{ flexDirection: 'row', height: 35, }}> <Text style={{ marginLeft: 5, textAlignVertical: 'center', }}>{item.name}</Text> <Text style={ { textAlignVertical: 'center', height: 35, position: 'absolute', right:5 } }>{item.numberOfListings}</Text> </View> </TouchableHighlight> <Divider/> </View> ) }

React native - 已经将绑定放在构造函数中但仍然未定义不是对象（评估this.state）＆＃39;

1 个答案: