React Native TypeError：undefined不是一个函数（'... this.state.clubs.map ...'附近）

Question

我无法在应用程序中显示我的api数据，我感觉这与我要映射数据的方式有关。 当我使用我的第一个api时，它可以工作，但它不是正确的一个，因为它显示了所有俱乐部信息而不是单个俱乐部。 这是邮递员：

这是控制台：

这是应用程序中显示的内容：

我遇到的问题是，当我使用允许我获取单个俱乐部数据的第二个api链接时，在映射它时出现错误。

这是我的代码，我唯一更改的是api链接，我也尝试使用c.club.numberOfCheckIns，但它也不起作用。

class Profile extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      clubInfo: []
    };
  }


  componentDidMount() {
    this._get('http://ec2-3-15-176-119.us-east-2.compute.amazonaws.com:8080/clubs/get/1').then(
      data => {
        this.setState({ clubInfo: data })
      }
    )
  }

  _get = async (endpoint) => {
    const res = await fetch(endpoint, {
      headers: {
        'Content-Type': 'application/json',
        'Access-Token': '1*adminaccesstoken'
      }
    })
    const data = await res.json();
    console.log(data)
    return data;
  }

  renderClubData() {
    return this.state.clubInfo.map((c, index) => {
      const { clubId, name, city, country, email, verified } = c  //destructuring
      return (
        <View key={c.clubId}>
          <Text
            bold
            size={20}
            color="#B8AA5B"
            style={{ marginBottom: 4 }}
          >{c.numberOfCheckIns}
          </Text>
        </View>

      )
    })
  }

  render() {
    return (
      <Block flex style={styles.profile}>
        <Block flex>
          <ImageBackground
            source={{ uri: Images.EventPhoto }}
            style={styles.profileContainer}
            imageStyle={styles.profileBackground}
          >
            <ScrollView
              showsVerticalScrollIndicator={false}
              style={{ width, marginTop: '55%' }}
            >
              <Block flex style={styles.profileCard}>
                <Block style={styles.info}>
                  <Block middle style={{ marginTop: 10, paddingBottom: 10 }} row space="between">
                    <Block middle>
                      {this.renderClubData()}

                      <Text size={12}>CHECK-INS</Text>
                    </Block>

这是邮递员：

Answer 1

问题在于您处理this.state.clubInfo.map()方法的方式。为了使用map方法，您需要传递一个数组。

这就是为什么以前可以使用它的原因，因为您将数据数组发送到this.state.clubInfo.map()。

按如下所示更改renderClubData（），因为现在由于API请求而获得了一个对象。

renderClubData() {
  return (
    <View key={c.clubId}>
      {
        this.state.clubInfo.club.numberOfCheckIns &&
        <Text bold size={20} color="#B8AA5B" style={{ marginBottom: 4 }}>
          {this.state.clubInfo.club.numberOfCheckIns}
        </Text>
      }
    </View>
  )
}

@DevAS也正确。您可以按以下方式尝试[this.state.clubInfo].map()，

renderClubData() {
  return [this.state.clubInfo].map((c, index) => {
    return (
      <View key={c.club.clubId}>
        <Text bold size={20} color="#B8AA5B" style={{ marginBottom: 4 }} >
        {c.club.numberOfCheckIns}
        </Text>
      </View>

    )
  })
}

我希望这会对您有所帮助。

Answer 2

我知道了：

componentDidMount() {
    this._get('API').then(
      data => {
        this.setState( {clubInfo: [data]})
      }
    )
  }

renderClubData() {
  return this.state.clubInfo.map((c, index) => {
    return (
      <View key={c.club.clubId}>
        <Text bold size={20} color="#B8AA5B" style={{ marginBottom: 4 }} >
        {c.club.numberOfCheckIns}
        </Text>
      </View>

    )
  })
}

我使用[]作为数据将JSON转换为数组。