Question

附加JSON ： -

[
  {
    "category":"Faces",
    "items": [
      {
        "name": "Oh well!",
        "art" : "¯\\_(ツ)_/¯"
      },
      {
        "name": "Disapproving Look",
        "art":  "ಠ_ಠ"
      },
      {
        "name": "Disapproving Look 2",
        "art":  "ఠ_ఠ"
      },
      {
        "name": "Glasses Smile",
        "art":  "ʘ‿ʘ"
      },
      {
        "name": "Devious Smile",
        "art":  "ಠ‿ಠ"
      },
      {
        "name": "Frowning",
        "art": "ಠ╭╮ಠ"
      },
      {
        "name": "Yelling",
        "art": "ಠoಠ"
      },
      {
        "name": "Mustache Man",
        "art": "ಠ▃ಠ"
      },
      {
        "name": "Blank Stare",
        "art": "ರ_ರ"
      },
      {
        "name": "HUH?",
        "art":  "ლ(｀ー´ლ)"
      },
      {
        "name": "Rosy Cheeks",
        "art":  "(｡◕‿◕｡)"
      },
      {
        "name": "hehehe",
        "art":  "( ¬‿¬)"
      },
      {
        "name": "Pointing Out",
        "art":  "☜(⌒▽⌒)☞"
      },
      {
        "name": "Haha!",
        "art":  "☜(ﾟヮﾟ☜)"
      },
      {
        "name": "Run Away Crying",
        "art":  "ε=ε=ε=┌(;*´Д`)ﾉ"
      },
      {
        "name": "Cheers",
        "art":  "（ ^_^）o自自o（^_^ ）"
      },
      {
        "name": "Up All Night",
        "art":  "۞_۞"
      },
      {
        "name": "High",
        "art":  "q(❂‿❂)p"
      },
      {
        "name": "Dazed & Confused",
        "art":  "⊙﹏⊙"
      },
      {
        "name": "No Clue!",
        "art":  "¯\\_(⊙︿⊙)_/¯"
      },
      {
        "name": "I Dunno",
        "art":  "¯\\(°_o)/¯ "
      },
      {
        "name": "Staring Eyes",
        "art":  "Ꙭ"
      },
      {
        "name": "Cat Eyes",
        "art": "ф_ф"
      },
      {
        "name": "Winking",
        "art": "◕‿↼"
      },
      {
        "name": "Reaching Down",
        "art":  "(,,Ծ‸Ծ,,)"
      },
      {
        "name": "Just Woke up",
        "art":  "╰(´・｀)ﾉ"
      },
      {
        "name": "Sleep Walking",
        "art":  "(¬º-°)¬"
      },
      {
        "name": "Disappointed Look",
        "art":  "(-_-)"
      }
    ]
  },
  {
    "category": "Emotions",
    "items": [
      {
        "name": "Angry",
        "art":  "{{|└(>o< )┘|}}"
      },
      {
        "name": "Why, God, WHY!?",
        "art":  "щ（ﾟДﾟщ）"
      },
      {
        "name": "In Love",
        "art":  "♥（｡✿‿✿｡）❤"
      },
      {
        "name": "In Love 2",
        "art":  "♥‿♥"
      },
      {
        "name": "Puzzled",
        "art":  "く(＾_・)ゝ"
      },
      {
        "name": "Mad",
        "art":  "（　ﾟДﾟ）"
      },
      {
        "name": "Whatever",
        "art":  "（＾～＾）ノ"
      },
      {
        "name": "Happy",
        "art":  "ヽ(´▽`)/"
      },
      {
        "name": "Love at First Sight",
        "art":  "꒰♡ˊ͈ ु꒳ ूˋ͈꒱.⑅*♡"
      },
      {
        "name": "Need A Hug",
        "art":  "ヽ(´ー｀)ノ"
      },
      {
        "name": "So Beautiful!",
        "art":  "ಥ_ಥ"
      },
      {
        "name": "Sad / Crying",
        "art":  "ಥ﹏ಥ"
      },
      {
        "name": "Embarrased",
        "art":  "(﹡⌒▽⌒﹡)"
      },
      {
        "name": "Extra Embarrased",
        "art":  "(/ω＼)"
      },
      {
        "name": "No Thanks",
        "art": "(ღ˘⌣˘ღ)"
      },
      {
        "name": "I've Seen The Light",
        "art": "•✞_✞•"
      }
    ]
  },]

尝试使用React-Native

class Textables extends Component{
  constructor(){
    super()
    this.state={data:[]}
  }

  getData(){
    return fetch('https://raw.githubusercontent.com/OTGApps/Textables/master/resources/content.json')
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({data: responseJson});
      })
      .catch((error) => {
        console.error(error);
      });
  }

  componentDidMount(){
    this.getData();
  }

	render()
	{
      let articles= this.state.data.map(function(articleData, index){
        let articles1 = articleData.map(function(meow, j){
          return(<content>
            <Card><CardItem><Body>
            <Text>{meow.items.name}</Text></Body></CardItem></Card>
            <Card><CardItem><Body>
            <Text>{meow.items.art}</Text></Body></CardItem></Card></content>
          );
        });
        return(

            <Card><CardItem><Body>
            <Text>{articleData.category}</Text></Body></CardItem></Card>
        );
      });
        return(
          <Content>
          {articles}
        </Content>
        )
	}
}

错误： - undefined不是函数（评估'articleData.map'）我试图通过循环遍历每个数组逐个映射项目。我应该使用index.map而不是articleData.map吗？

Answer 1

articleData指向数据数组中的对象。它看起来像：

{ "category": "Emotions", "items": [], }

您想使用articleData.items.map。

此外，getData函数可能无法按您的意愿工作。由于它不受类范围的约束，因此无法访问this.setState。您可能想要将其添加到构造函数中：

this.getData = this.getData.bind(this)

或者，您可以更改函数声明：

getData = () => { /* your function */ }

在本地反应

1 个答案: