在本机反应中获取对象数组中的第一个元素

Question

我想从对象数组中获取“appName”

我正在使用“react-native-android-installed-apps”来获取设备中所有应用的列表。我已经设法在一个对象中获取应用程序，但我无法从数组对象中访问“appName”

import React, {Component} from 'react';
import {View, Text} from 'react-native';
import RNAndroidInstalledApps from 'react-native-android-installed-apps';

class App extends Component {
    check() {
        names = {
            apps: null
        };
        RNAndroidInstalledApps.getApps()
            .then(apps => {
                names.apps = apps
            });

        console.log(names);
    }
    render() {
        return(
            <View>
                <Text>Hello</Text>
                {this.check()}
            </View>
        );
    }
}

export default App;

我想从对象中得到什么：https://imgur.com/a/dD2KgxO

我希望从对象数组中获取“appName”，然后使用平面列表显示所有应用

Answer 1

从RNAndroidInstalledApps.getApps() 返回的apps 数据是Array，这意味着您可以通过以下方式访问第一个应用名称：

const firstAppItem = apps[0];
const firstAppName = firstAppItem.appName;

要显示此内容，您需要更新组件以确保在应用数据可用时（即在调用.then() 处理程序之后）重新呈现它。

以下更改将显示从RNAndroidInstalledApps.getApps() 返回的第一个应用的名称：

class App extends Component {

    /* Define state of app component */
    state = { firstAppName : "Loading" };

    componentDidMount() {
        /* When component first mounts/starts, run check() once */
        this.check();
    }

    check() {

        RNAndroidInstalledApps.getApps()
            .then(apps => {

                if(apps.length > 0) {

                    /* Get first item from apps array */
                    const firstApp = apps[0];

                    /* Set component state with first app name */
                    this.setState({ firstAppName : firstApp.appName });
                }
                else {

                    /* If no apps returned, display default message */
                    this.setState({ firstAppName : 'No app name found' });
                }                    
            });
    }

    render() {

        return(
            <View>
                <Text>Hello</Text>
                { this.state.firstAppName }
            </View>
        );
    }
}

更新

列出所有应用名称：

class App extends Component {

    state = { appNames : [] };

    componentDidMount() {
        this.check();
    }

    check() {

        RNAndroidInstalledApps.getApps()
            .then(apps => {                       
                this.setState({ 
                    appNames : apps.map(app => app.appName) 
                });               
            });
    }

    render() {

        return(
            <View>
                <Text>Hello</Text>
                { 
                    this.state.appNames.map(appName => 
                    <Text>{ appName }</Text>) 
                }
            </View>
        );
    }
}