Question

我的项目有问题。我想在从 JSON 中获取元素后显示它们。当我试图观察 JSON 的内容时，我看到了它，但是当我试图在我的组件中显示它时，它没有出现。此外，调试器不会显示任何错误或问题，并且应用程序编译成功。我真的被困住了，所以我真的需要你们的帮助

App.js 代码：

import React, { Component } from 'react'
import { View, ScrollView, StyleSheet } from 'react-native'
import { Header, ImageCard } from './src/components/uikit'

const url = 'https://s3.eu-central-1.wasabisys.com/ghashtag/RNForKids/00-Init/data.json'

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      title: 'STAR GATE',
      data: []
    };
  }

  componentDidMount = async () => {
    try {
      const response = await fetch(url)
      const data = await response.json()
      this.setState({ data })
    }
    catch (e) {
      console.log(e)
      throw e

    }
  }

  render() {
    const { title, data } = this.state
    const { container } = style

    return (
      <View>
        <Header title={title} />
        <ScrollView>
          <View style={container}>
            {data.map(item => {
              <ImageCard data={item} key={item.id} />
            })
            }
          </View>
        </ScrollView>
      </View>
    )
  }
}

const style = StyleSheet.create({
  container: {
    marginTop: 30,
    flexDirection: 'row',
    flexWrap: 'wrap',
    flexShrink: 2,
    justifyContent: 'space-around',
    marginBottom: 150,
    backgroundColor: 'gold',
    width: 150
  }

})

我的问题发生在App.js里面

和 ImageCard 代码：

import React from 'react'
import { Image, View, Text, StyleSheet } from 'react-native'
import { h, w } from '../../../constants'

const ImageCard = ({data}) => {
    const {container, sub, h2, cover} = styles
    const {image, name} = data
    return (
        <View style={container}>
            <View style={sub}>
                <Image
                    style={cover}
                    source={{
                        uri: image,
                    }}
                />
            </View>
            <Text style={h2}>{name.toUpperCase()}</Text>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        width: w / 2.1,
        paddingVertical: 10,
    },

    sub: {
        padding:10,
        shadowColor: 'black',
        shadowRadius: 8,
        shadowOffset: { width: 0, height: 5 },
        shadowOpacity: 0.4,
    },

    h2: {
        fontFamily: 'AvenirNext-DemiBold',
        fontSize: 16,
        alignSelf: 'center',
        textAlign: 'center',
        width: w / 2.4
    },

    cover: {
        width: w / 2.4,
        height: w * 0.63,
        borderRadius: 10
    }
})

export { ImageCard }

应该没问题，我是按照向导做的，但是出了点问题。

Answer 1

看起来你没有从地图返回任何东西！

data.map(item => {
  <ImageCard data={item} key={item.id} />
})

应该变成

data.map(item => {
  return <ImageCard data={item} key={item.id} />
})

// OR

data.map(item => ( // <-- Note the bracket change
  <ImageCard data={item} key={item.id} />
))

反应本机和地图

1 个答案: