编辑 FlatList 的每个项目的状态答案

【问题标题】：Edit state of every item of a FlatList编辑 FlatList 的每个项目的状态
【发布时间】：2019-07-26 23:41:37
【问题描述】：

我创建了一个使用 FlatList 的页面。这个 FlatList 使用我制作的一个项目组件，当通过将状态“隐藏”设置为 false 按下时，它会在其下方显示另一个视图。我遇到的主要问题是，当其中一个项目被按下时，我找不到将“隐藏”状态更改为 true 的方法，因此始终只保留一个项目显示附加视图。同时，当我刷新/重新渲染我的 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，但我从未找到任何可以帮助的东西我。

【问题讨论】：

标签： react-native state react-native-flatlist

【解决方案1】：

所以在想了很多之后，我终于找到了解决方案。我没有处理每个项目中的隐藏状态，而是列出了与我的平面列表所在组件中的项目 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()}
            />

【讨论】：