如何在 React Native 中映射对象？答案

【问题标题】：How to map over objects in React Native?如何在 React Native 中映射对象？
【发布时间】：2018-08-14 01:42:05
【问题描述】：

我需要一些帮助来渲染 jsx 中的 json 在 react native 中。我从服务器获得的响应是对象，所以我如何循环它们？我从服务器得到一个有效的响应，但我得到了map 方法的问题，因为我认为 map 方法仅适用于数组。所以请帮我这样做。以下是 json 对象

JSON

    {
    "content": "<p><strong>Preliminary Exam; MCQ –1</strong></p>\n",
    "meta": {
        "access": 1,
        "status": 0,
        "progress": 0,
        "marks": 0,
        "max": 60,
        "questions": [

            {
                "type": "single",
                "hint": "",
                "explanation": "",
                "content": "<p>Question Statement :</p>\n<ol>\n<li>The is question:</li>\n</ol>\n",
                "options": [
                    "(a).Answer1",
                    "(b).Answer2 ",
                    "(c).Answer3 ",
                    "(d).Answer4 "
                ],
                "correct": "4",
                "marks": 4,
                "user_marks": 0,
                "status": 0,
                "marked": null,
                "auto": 1
            },
            {
                "type": "single",
                "hint": "",
                "explanation": "",
                "content": "<p>2.Question 2</p>\n",
                "options": [
                    "(a) one ",
                    "(b) two  ",
                    "(c) three ",
                    "(d) four"
                ],
                "correct": "2",
                "marks": 4,
                "user_marks": 0,
                "status": 0,
                "marked": null,
                "auto": 1
            }
        ]
    }
}

我试过如下

示例代码

state = { details: [] };

componentWillMount() {
   AsyncStorage.getItem('userdetail').then((value) => {
       console.log(value);

       fetch('https://www.mywebsite.com', {
            method:'GET',
            headers: {
                'Authorization': value
            }
        })
        .then((response) => response.json())
        .then((responseData) =>
             this.setState({
                 details:responseData.meta.questions
             })
        );

    });
}

render() {
    console.log(this.state);
    return (
        this.state.details.map( a =>
            <Card>
                <CardSection>
                    <Text>{a.questions.content}</Text>
                </CardSection>
            </Card>     
    );
}

但出现错误this.state.details.map 不是函数？我的渲染方法有问题吗？请帮忙。

【问题讨论】：

标签： json react-native rendering jsx

【解决方案1】：

问题在于responseData，它是一个对象而不是数组，试试

details:responseData.meta.questions

【讨论】：

我已经像上面一样更新了我的问题，但仍然出现错误..请帮助解决..
您是否遇到同样的错误？确保你在构造函数中定义了details[]，或者在使用它之前设置条件，检查它是否为空。
现在我收到了错误cannot read property content of undefined
检查你得到的数据，你可能需要使用details:responseData.meta.questions或details:responseData.data.meta.questions。检查您在responseData 中获得的值是多少，并根据它设置条件。简而言之，您的详细信息值应该是数组，而不是对象
很酷，这是我的错误，因为我已经映射了问题数组，我只需要像这样访问{a.content}..非常感谢您的宝贵回复

【解决方案2】：

map 方法/函数的问题是您在单个对象而不是数组中使用它。您的 responseData 是一个巨大的对象，其中包含 questions 数组。您可以通过以下问题映射：

render() {
    console.log(this.state);
    return (
        this.state.details.meta.questions.map( a =>
            <Card>
                <CardSection>
                    <Text>{a.content}</Text>
                </CardSection>
            </Card>

        );
     );
}

这应该可以解决您的问题

【讨论】：