Question

我对React-native相当陌生，我一直在尝试显示排序并显示一些api数据。我有以下显示在SectionList中的json数据：

[
{ 
  key:Animals
  shown: true
  data: [{....}]
}
{
  key: Anime
  shown: true
  data: [{....}]
}
.....
]

我的愿望是，当我为每个类别的项按下某个按钮（在这种情况下，它们是“键”值）时，它们的“显示”布尔值会更改状态，因此整个部分都变为隐藏状态。

其他信息：我在renderSectionHeader中渲染每个按钮

完整代码：

export default class BasicFlatList extends Component<Props> {

//constructor setting states
constructor(props) {
    super(props);
    this.state = ({
        deletedRowKey: null,
        loading: true,
        link: 'https://api.publicapis.org/entries',
        data: []
    });
}

componentDidMount(){

    return fetch(this.state.link)
        .then((response) => response.json())
        .then((responseJson) => {

            this.setState({
                data: responseJson.entries,
            }, function () {

                console.tron.log('date', this.state.data)

                groups = _.groupBy(this.state.data, d => d.Category);

                console.tron.log('gruping', groups);

                groups = _.reduce(groups, (acc, next, index) => {
                    acc.push({
                        title: index,
                        shown: true,
                        data: next
                    });
                    return acc
                }, []);

                console.tron.log('reducing', groups);
                this.setState({
                    loading: false,
                    groups,
                })
            });
        })
        .catch((error) => {
            console.error(error);
        })

}

//functions
//function for rendering in the separator between each element
renderSeparator = () => {
    return (
        <View style={styles.separator}/>
    )
};

//function for rendering in the header
renderHeader = () => {
    return (<View style={styles.header}>
        <Text style={styles.headertext}>Organized APIs</Text>
    </View>)
};

//function for rendering in each item
renderItem = (item) => {
    return <ListItem APIname={item.item.API} APIdescription={item.item.Description} url={item.item.Link} shown={item.section.shown}/>
};

//function for rendering in each section
renderSectionHeader = (headerItem) => {
    return (
        <View style={{flex:1, flexDirection:'row'}}>
            <Text adjustFontSizeToFit numberOfLines={1} allowFontScaling
                  style={styles.sectionheader}>{headerItem.section.title}</Text>
            <Button unpressedText={'Show'} pressedText={'Hide'} style={styles.buton} />
        </View>

    )
};


//main render part
render(){
    return (
        <View style={{flex: 1}}>
            {this.state.loading && <Loading/>}
            {!this.state.loading &&
            <View style={{flex: 1}}>
                <View style={styles.topbar}/>
                <SectionList
                    ListHeaderComponent={this.renderHeader}
                    SectionSeparatorComponent={this.renderSeparator}
                    sections={this.state.groups}
                    renderItem={this.renderItem}
                    renderSectionHeader={(headerItem, index) => this.renderSectionHeader(headerItem, index)}
                    keyExtractor={(item, index) => index}
                    stickySectionHeadersEnabled={true}
                    initialNumToRneder={15}
                    removeCLippedSubviews={true}
                />
            </View>
            }
        </View>
    );
}

}

从按钮上的json更改数据单击React-Native

0 个答案: