问题：

获取JSON并遍历react native中的值

糜雪峰

2023-03-14

我是新的反应本机，我试图简单地迭代通过一个示例json文件，但我收到的错误未定义不是一个函数（评估'this.state.results.map'）

我最初将状态设置为对象，因此不确定为什么会收到此错误。

这里是JS：

import React, { Component } from 'react';
import { AppRegistry, ListView, Text, View, StyleSheet, TouchableHighlight } from 'react-native';

var REQUEST_URL = 'https://facebook.github.io/react-native/movies.json';

class WPReact extends Component {
  constructor(props) {
    super(props);
    this.state = {results: []};
  }
  componentDidMount() {
    this.fetchData();
  }
  fetchData() {
    fetch(REQUEST_URL)
      .then((response) => response.json())
      .then((responseData) => {
        this.setState({
          results : { responseData }
        });
      })
      .done();
  }
  render() {
    return this.renderJSON();
  }
  renderJSON() {
    contents = this.state.results.map((item) => {
      <View key={item.movies.title} style={ styles.container }>
        <Text style={styles.title}>
          {item.movies.title}
        </Text>
      </View>
     });
    return (
      <View style={styles.container}>
        {contents}
      </View>
    );
  }
}

var Dimensions = require('Dimensions');

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
  },
  textContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 30,
    textAlign: 'center',
    margin: 10,
  },
  text: {
    fontSize: 18,
    paddingLeft: 20,
    paddingRight: 20,
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

// App registration and rendering
AppRegistry.registerComponent('AwesomeProject', () => WPReact);

因此，我将renderJSON（）编辑为，并删除了responseData的大括号，正如您所说，因为它已经是一个对象：

renderJSON() {

    console.log(this.state.results.description);
    contents = this.state.results.movies.map((item) => {
      <View key={item.title} style={ styles.container }>
        <Text style={styles.title}>
          {item.title}
        </Text>
      </View>
     });
    return (
      <View style={styles.container}>
        {contents}
      </View>
    );
  }

我添加了一个控制台日志，以查看是否可以输出一些数据，并且可以查看描述。我使用的示例JSON是（react的演示）：

{
  "title": "The Basics - Networking",
  "description": "Your app fetched this from a remote endpoint!",
  "movies": [
    { "title": "Star Wars", "releaseYear": "1977"},
    { "title": "Back to the Future", "releaseYear": "1985"},
    { "title": "The Matrix", "releaseYear": "1999"},
    { "title": "Inception", "releaseYear": "2010"},
    { "title": "Interstellar", "releaseYear": "2014"}
  ]
}

我可以记录描述和标题。但是我仍然在接收：ReactNativeJS：未定义不是一个对象（评估'this.state.results.movies.map'）

如果我尝试记录console.log（this.state.results.movies[0]. title）我正在接收未定义的不是对象（评估this.state.results.movies[0]）

fetchData() {
    fetch(REQUEST_URL)
      .then((response) => response.json())
      .then((responseData) => {
        console.log(responseData);
        this.setState({
          results : responseData
        });
      })
      .done();
  }

console.log（responseData）显示：

03-29 13:49:53.028  3062  4143 I ReactNativeJS: { title: 'The Basics - Networking',
03-29 13:49:53.028  3062  4143 I ReactNativeJS:   description: 'Your app fetched this from a remote endpoint!',
03-29 13:49:53.028  3062  4143 I ReactNativeJS:   movies: 
03-29 13:49:53.028  3062  4143 I ReactNativeJS:    [ { title: 'Star Wars', releaseYear: '1977' },
03-29 13:49:53.028  3062  4143 I ReactNativeJS:      { title: 'Back to the Future', releaseYear: '1985' },
03-29 13:49:53.028  3062  4143 I ReactNativeJS:      { title: 'The Matrix', releaseYear: '1999' },
03-29 13:49:53.028  3062  4143 I ReactNativeJS:      { title: 'Inception', releaseYear: '2010' },
03-29 13:49:53.028  3062  4143 I ReactNativeJS:      { title: 'Interstellar', releaseYear: '2014' } ] }

log（this.state.results.movies）；

03-29 14:18:05.483  3062  4726 I ReactNativeJS: undefined
03-29 14:18:05.510  3062  4726 I ReactNativeJS: [ { title: 'Star Wars', releaseYear: '1977' },
03-29 14:18:05.510  3062  4726 I ReactNativeJS:   { title: 'Back to the Future', releaseYear: '1985' },
03-29 14:18:05.510  3062  4726 I ReactNativeJS:   { title: 'The Matrix', releaseYear: '1999' },
03-29 14:18:05.510  3062  4726 I ReactNativeJS:   { title: 'Inception', releaseYear: '2010' },
03-29 14:18:05.510  3062  4726 I ReactNativeJS:   { title: 'Interstellar', releaseYear: '2014' } ]

共有3个答案

陶腾

2023-03-14

responseData必须是一个数组，才能将array#map（）方法作为其上的方法使用。

您正在将结果设置为一个对象，该对象包含您的响应数据的值：

this.setState({ 
  results : { responseData } // Object literal notation albeit possibly incorrect depending on the value of responseData
});

如果您确定responseData是一个数组，请删除周围的大括号：

this.setState({ 
  results :  JSON.parse(responseData);
  // You'll want to parse your JSON data here too :)
  // If responseData is an array, you'll be able to call .map on it
});

// this.state.results.movies.map should now work
// (given the structure of the expected JSON)

罗伟志

2023-03-14

使用ES6类的React组件不会将此自动绑定到非React方法。在构造函数中，添加：

this.renderJSON=this.renderJSON.bind（this）

陆琦

2023-03-14

我看到一些你需要改变的事情。

首先，当您使用ES6执行此操作时，您需要绑定finchData方法this.fetchData=this.fetchData.bind（this）；在构造函数中（寻找其他方法来执行此操作）。

其次，map应该应用于this.state.results.movies，因为这是数组（在你的帖子之后）。this.state.results不是数组，是一个包含数组的对象。

import React, { Component } from 'react';
import { AppRegistry, ListView, Text, View, StyleSheet, TouchableHighlight } from 'react-native';

var REQUEST_URL = 'https://facebook.github.io/react-native/movies.json';

class WPReact extends Component {
  constructor(props) {
    super(props);

    this.state = {
      //Lets initialize results with the same struct we expect to receive from the api
      results: {
        title: '',
        description: '',
        movies: []
      }
    };
    //Using ES6 we need to bind methods to access 'this'
    this.fetchData = this.fetchData.bind(this);
  }

  componentDidMount() {
    this.fetchData();
  }

  fetchData() {
    fetch(REQUEST_URL)
      .then((response) => response.json())
      .then((responseData) => {
        this.setState({
          results: responseData
        });
      })
      .done();
  }

  render() {
    //this.state.results.movies is the array you have to iterate
    contents = this.state.results.movies.map((item) => {
      //We need to return the corresponding mapping for each item too.
      return (
          <View key={item.title} style={ styles.container }>
            <Text style={styles.title}>
              {item.title}
            </Text>
          </View>
        );
     });
    return (
      <View style={styles.container}>
        {contents}
      </View>
    );
  }
}

var Dimensions = require('Dimensions');

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
  },
  textContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 30,
    textAlign: 'center',
    margin: 10,
  },
  text: {
    fontSize: 18,
    paddingLeft: 20,
    paddingRight: 20,
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

// App registration and rendering
AppRegistry.registerComponent('AwesomeProject', () => WPReact);

让我知道，如果它的工作，我还没有测试，但我会很快。

类似资料：

遍历角度控制器中的嵌套json数组并获取唯一值

问题内容：我需要遍历看起来像这样的嵌套json数组我想要的是遍历每个公司中的技术列表，然后返回唯一值列表。但是，我无法访问控制器中公司阵列中的单个公司。到目前为止看起来像这样显然我做错了。问题答案：使用angular的forEach：
Python实现遍历数据库并获取key的值

本文向大家介绍Python实现遍历数据库并获取key的值，包括了Python实现遍历数据库并获取key的值的使用技巧和注意事项，需要的朋友参考一下遍历Redis数据库中有以格式为PREFIX_*的按照key-value方式存储的key，并打印其值. 遍历使用SCAN，因为KEYS PREFIX_*可能会造成Redis长时间阻塞。查询使用pipeline减少交互，提高效率。附上其他网页的代码，
在React中遍历JSON

问题内容：我有以下代码：打印出以下内容： {“ active”：{“ label”：“ Active”，“ value”：“ 12”}，“ automatic”：{“ label”：“ Automatic”，“ value”：“ 8”}，“ waiting”：{ “ label”：“正在等待”，“ value”：“ 1”}，“ manual”：{“ label”：“ Manual”，“ val
在EJS中遍历JSON

问题内容：我在下面的EJS中有代码，行的输出是正确的，由3个对象组成的数组，每个对象具有属性ID，名称等。我可以操纵行以在JS中填充表格。但是，我想知道是否有一种方法可以通过上述方式完成？当我运行上面的代码时，JSON.stringify（data）.length不是3，而是整个字符串的长度。另一个问题是当我尝试添加 <％警报（’t’）; ％>或<％window.alert（’t’）; ％
JSON-遍历JSONArray

问题内容：我有一个带有一些数组的JSON文件。我想遍历文件数组并获取它们的元素和它们的值。这是我的文件的样子：这是我走了多远：是否可以做这样的事情？我要这样做的原因是因为文件中的数组具有不同数量的元素。问题答案：更改至或者取决于您使用的是JSON到/来自Java的库。（看起来将为您工作。）然后，要访问“对象”中的字符串元素，请按元素名称将其取出。如果需要中的元素名称，则可以
遍历嵌套字典并在Python中获取路径？

问题内容：我有一本字典，例如：一切都始于“根”，它们有两种类型的数据：URL和文件夹，它们是字典。如果是文件夹，则必须具有键“ children”，该键的值是一个列表，我们可以在其中放置更多URL和文件夹。现在，我想遍历此嵌套字典，以获取所有子文件夹中的URL，因此我编写了一个函数：我可以这样使用它：完美运作。但是它只是生成URL的字典，我不知道它在哪里。我也想走这条路。我该怎么做？问

获取JSON并遍历react native中的值

共有3个答案

相关问答

相关文章

相关阅读

相关工具

相关文档