有没有办法在屏幕底部的页脚中打印和显示从我的 JSON 到达的总和对象？

Question

在我的示例中，函数“getData”加载我的数据，但在加载之后，我尝试在底部的页脚中打印并显示来自 JSON 的对象的总和屏幕。
我真的不知道该怎么做。我不明白如何解决这个问题，因为我尝试了很多方法。 这是我的例子：


export default class MainScreen extends Component {
    constructor(props) {
        super(props);
        this.state = { data: [] };
    }
    getData = () => {
        this.setState({ isLoading: true })
        axios.get("https://rallycoding.herokuapp.com/api/music_albums")
            .then(res => {
                this.setState({
                    isLoading: false,
                    data: res.data
                });
                console.log(res.data);
            });
    }

    componentDidMount() {
        this.props.navigation.setParams({getData: this.getData}); //Here I set the function to parameter
        this.getData()
    }

    renderItem(item) {
        const { title, artist} = item.item;
        return (
            <TouchableOpacity
                onPress={() => this.props.navigation.navigate("Settings")}
            >
                <Card
                    containerStyle={{
                        borderColor: "black",
                        padding: 20,
                        height: 100,
                        backgroundColor: "#e6e6ff",
                        borderBottomEndRadius: 10,
                        borderTopRightRadius: 10,
                        borderBottomStartRadius: 10,
                    }}
                >
                    <View
                        style={{
                            paddingVertical: 15,
                            paddingHorizontal: 10,
                            flexDirection: "row",
                            justifyContent: "space-between",
                            alignItems: "center"
                        }}
                    >
                        <Icon name="chevron-right" size={30} color={"grey"} justifyContent={"space-between"} />
                        <Text style={styles.name}>
                            {title+ " " + artist}
                        </Text>
                        {/* <Text style={styles.vertical} numberOfLines={2}></Text> */}
                    </View>
                </Card>
            </TouchableOpacity>
        );
    }

    render() {
        if (this.state.isLoading) {
            return (
                <View style={{ flex: 1, paddingTop: 230 }}>
                    <Text
                        style={{ alignSelf: "center", fontWeight: "bold", fontSize: 20 }}
                    >
                        loading data...
          </Text>
                    <ActivityIndicator size={'large'} color={'#08cbfc'} />
                </View>
            );
        }

        return (
            <View style={styles.container}>
                <FlatList
                    data={this.state.data}
                    renderItem={this.renderItem.bind(this)}
                    keyExtractor={item => item.id}
                />
            </View>
        );
    }
}

/////////////////////////////////////////////////////////
MainScreen.navigationOptions = navData => {
    return {
        headerTitle: 'melon',
        headerRight: (
            <HeaderButtons HeaderButtonComponent={HeaderButton}>

                <Item
                    title=**"sync button"**
                    iconName={Platform.OS === "android" ? "md-sync" : "ios-sync"}
                    onPress={() => {
                        navData.navigation.navigate("getData");// here i trying to use the function
                        console.log("MT DATA====", navData.navigation.getParam(this.getData))//NO DATA
                    }}
                  />

            </HeaderButtons>
        )
    };
};

希望你能在这种情况下提供帮助，因为这个关键道具让我很困惑

Answer 1

也许你应该像这样设置导航参数

getData = () => {
        this.setState({ isLoading: true })
        axios.get("https://rallycoding.herokuapp.com/api/music_albums")
            .then(res => {
                this.setState({
                    isLoading: false,
                    data: res.data
                });
                this.props.navigation.setParams({data: res.data});
                console.log(res.data);
            });
    }

然后在

headerRight: (
            <HeaderButtons HeaderButtonComponent={HeaderButton}>

                <Item
                    title=**"sync button"**
                    iconName={Platform.OS === "android" ? "md-sync" : "ios-sync"}
                    onPress={() => {
                        const data = navData.navigation.getParam("data");
                        console.log("MT DATA====", data);
                    }}
                  />

            </HeaderButtons>
        )

Answer 2

如果您确定所有元素都是唯一的，则可以在 FlatList -

中使用此密钥提取器

keyExtractor={(_, index) => String(index)}

这将确保平面列表中所有项目的唯一性

有没有办法在屏幕底部的页脚中打印和显示从我的 JSON 到达的总和对象？

is there way to print and show the total sum objects that arrive from my JSON in a footer at the bottom of the screen?

javascript

reactjs

react-native

axios

react-native-flatlist