React Native - 映射对象数组答案

【问题标题】：React Native - map array of objectsReact Native - 映射对象数组
【发布时间】：2020-07-16 20:18:00
【问题描述】：

我目前有一个以 JSON 格式返回对象数组的 api。

Array [
  Array [
    Object {
      "created_at": "2020-06-29T22:16:51.000000Z",
      "id": 2,
      "list_id": 2,
      "lists": Object {
        "created_at": "2020-06-29T22:16:51.000000Z",
        "id": 2,
        "name": "Development",
        "public": null,
        "updated_at": "2020-06-29T22:16:51.000000Z",
        "user_id": 1,
      },
      "status": null,
      "updated_at": "2020-06-29T22:16:51.000000Z",
      "user_id": 1,
    },
    Object {
      "created_at": "2020-06-29T22:23:00.000000Z",
      "id": 3,
      "list_id": 3,
      "lists": Object {
        "created_at": "2020-06-29T22:23:00.000000Z",
        "id": 3,
        "name": "House Tasks",
        "public": null,
        "updated_at": "2020-06-29T22:23:00.000000Z",
        "user_id": 1,
      },
      "status": null,
      "updated_at": "2020-06-29T22:23:00.000000Z",
      "user_id": 1,
    },
  ],
  Array [],
]

我正在使用 React Native 来检索该数据，我现在想将“名称”输出到屏幕 'id' 应该用作键。

这是我的代码（跟随 Steve Griffith 在 YouTube 上的精彩指南）。

import React from 'react';
import { Text, Button, ScrollView } from 'react-native';
import { globalStyles } from '../styles/global';

export default class App extends React.Component {
    constructor(){
        super();
        this.state = {
            data: null,
            loaded: true,
            error: null
        }
    }

    baseURL = 'https://www.example.com/api';

    getData = (ev)=>{
        this.setState({loaded:false, error: null});
        let url = this.baseURL + '/list';
        let h = new Headers();
        h.append('Authorization', 'Bearer XXXXX');
        h.append('Content-Type', 'application/json');
        h.append('X-Requested-With', 'XMLHttpRequest');    
        let req = new Request(url, {
            headers: h,
            method: 'GET'
        });
        
        fetch(req)
        .then(response=>response.json())
        .then(this.showData)
        .catch(this.badStuff)
    }
    showData = (data)=>{
        this.setState({loaded:true, data});
        console.log(data);
    }
    badStuff = (err) => {
        this.setState({loaded: true, error: err.message});
    }
    componentDidMount(){
      
    }
    render() {
        return (
          <ScrollView style={globalStyles.container}>
                { !this.state.loaded && (
                    <Text>LOADING</Text>
                )}
                <Text>Your Lists Are:</Text>
                <Button title="Get Data"
                    onPress={this.getData} />
                { this.state.error && (
                    <Text style={styles.err}>{this.state.error}</Text>
                )}
                { this.state.data && this.state.data.length > 0 && (
                    this.state.data.map( list => (
                        <Text key={list.id}>
                           { list.name }    
                        </Text>
                    ))
                )}
            </ScrollView>
        );
    }
}

目前我在返回数据的屏幕上没有输出到我想要列表名称的位置。

任何人都可以帮助或指出正确的方向来实现这一目标吗？

我也研究过使用https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries 来解决问题，但这也只是返回：

> "0: [object Object],[object Object]"
> "1: "

【问题讨论】：

当使用下面的 { this.state.data[0] } 时，我得到 '[' 返回，这是字符串中的第一个 (0) 字符

标签： arrays json react-native object

【解决方案1】：

我不太确定您要达到的目标，但请检查：

const nameArray = testArr.map((arrays)=> arrays.map((secondArray) => {
return secondArray.lists.name
})).flat()

现在您可以执行以下操作，而不是返回普通的 .name：

return (<Text> {secondArray.lists.name} </Text>)

在这个JSFiddle 中，我映射了您的响应并从object_list 对象中提取了name，然后我将输出的数组展平，因为它是一个二维数组。或者如果你想要它在 2d 中，那么只需从它的末尾删除 .flat()

【讨论】：