编辑列表的每个项目的状态

Question

我制作了一个我使用flatlist的页面。当通过将状态"隐藏"设置为false时，此flatlist使用了我制作的项目组件，我制作的项目组件在自身下方显示了另一个视图。我遇到的主要问题是，当按下其中一个项目时，我找不到将"隐藏"状态更改为true的方法，因此总是只保留1个项目以显示当时的其他视图。与此同时，当我刷新/重新渲染我的flatlist时，它并没有将所有"隐藏"状态设置为true。

这是我渲染我的flatlist

的地方

_onRefresh() {
    this.setState({refreshing: true}, () => this._loadList());
}
render() {
    return (
        <View style={[style.container, style.whiteBackground]}>
            <CategoryFilter filterCallback={this._changeCategory}/>
            <FlatList
                data={this.state.list}
                extraData={this.state}
                renderItem={({item}) =>
                    <ListItemComponent item={item} category={this.state.category}/>
                }
                refreshing={this.state.refreshing}
                onRefresh={() => this._onRefresh()}
            />
        </View>
    );
}

这是我渲染并显示隐藏视图

的地方

constructor(props) {
    super(props);
    this.state = {
        hidden: true
    };
}
componentDidMount() {
    this.setState({hidden: true});
}
_onPress() {
    this.setState({
        hidden: !this.state.hidden
    });
}
[...]
_renderOS(item) {
    if (Platform.OS === 'android') {
        return (
            <TouchableNativeFeedback onPress={() => this._onPress()}>
                {this._renderItem(item)}
            </TouchableNativeFeedback>
        );
    } else if (Platform.OS === 'ios') {
        return(
            <TouchableOpacity onPress={() => this._onPress()}>
                {this._renderItem(item)}
            </TouchableOpacity>
        );
    }
}
[...]
_renderDescription(item) {
    if (this.state.hidden === true) {
        return null;
    } else {
        return (
            <View style={listItemStyle.descriptionContainer}>
                <Text style={listItemStyle.description}>
                    {item.description}
                </Text>
            </View>
        );
    }
}

我只想能够只有一个列表项目之一，当时隐藏的设置为false，并在刷新页面时将其设置为hidden = true，但是我从未找到任何可以帮助的东西我。

Answer 1

因此，在思考很多之后，我终于找到了解决方案。我没有在每个项目中处理隐藏状态，而是列出了与我的flatlist所在的组件中的项目ID相关联的每个隐藏状态，并添加一个功能，该函数将将先前打开的项目设置为隐藏并打开新的项目，并且将其作为对我的物品的回调，以便在我按下时可以称呼它。

_onPress(id) {
    let items;
    items = this.state.items.map((item) => {
        if (item.id === this.state.openId)
            item.open = false;
        else if (item.id === id)
            item.open = true;
        return item;
    });
    this.setState({
        items: items,
        openId: (id === this.state.openId ? '' : id)
    });
}
            <FlatList
                data={this.state.items}
                extraData={this.state}
                renderItem={({item}) =>
                    <ListItemComponent
                        onPress={this._onPress.bind(this)}
                        bet={item}
                        categoryList={this.state.categoryList}
                        open={item.open}/>
                }
                refreshing={this.state.refreshing}
                onRefresh={() => this._onRefresh()}
            />