尝试在React Native中在平面列表内声明变量时出现意外令牌 [英] unexpected token when trying to declare a variable inside flatlist in react native

问题描述

我正在尝试在React Native的FlatList组件中声明一个变量 但是当我声明它时，我得到了意外的令牌.

i'm trying to declare an variable inside the FlatList component in React Native But i get unexpected token, when i do declare it.

const FixturesScreen = ({ navigation }) => (
  <ScrollView style={styles.container}>
    <FlatList
      data={clubData.data.clubs}
      renderItem={({ item }) => (
        let fixture = item.name //unexpected token

        <View>
          <View>
            <Text style={styles.itemTitle}>{item.name}</Text>
            <ScrollView horizontal>
              <Text style={styles.listItem}>{fixture}</Text>
            </ScrollView>
          </View>
        </View>
  )
}
    />
  </ScrollView>
)

这是我完整的FixturesScreen cdoe

here is my full FixturesScreen cdoe

import React from 'react'
import { View, Text, FlatList, ScrollView, StyleSheet } from 'react-native'
import Ionicons from 'react-native-vector-icons/Ionicons'
import clubData from '../../clubData'


const styles = StyleSheet.create({
  container: {
    backgroundColor: '#4BABF4',
  },
  itemTitle: {
    color: 'black',
    fontSize: 20,
    marginTop: 20,
    marginBottom: 10,
    marginLeft: 15,
  },
  listItem: {
    color: '#FFFFFF',
    fontSize: 18,
    textAlign: 'center',
    marginRight: 15,
    marginLeft: 15,
    backgroundColor: '#77BEF5',
    width: 120,
    paddingVertical: 10,
  },
})


const CURRENTTGAMEWEEK = 30
const i = CURRENTTGAMEWEEK
const nxt1 = i + 1
const nxt2 = nxt1 + 2
const nxt3 = nxt2 + 1
const nxt4 = nxt3 + 1
const nxt5 = nxt4 + 1


// let fixture
// const team = clubData.data.clubs[0].name
// const hTeam = clubData.data.clubs[0].fixtures[0].homeTeam
// const hTeamShort = clubData.data.clubs[0].fixtures[0].homeTeamShort
// const aTeamShort = clubData.data.clubs[0].fixtures[0].awayTeamShort
// 
// if (team === hTeam) // working
//   fixture = aTeamShort
// else
//   fixture = hTeamShort

console.log(`Now is playing ${fixture}`)

const FixturesScreen = ({ navigation }) => (
  <ScrollView style={styles.container}>
    <FlatList
      data={clubData.data.clubs}
      renderItem={({ item }) => (
        let fixture = item.name

        <View>
          <View>
            <Text style={styles.itemTitle}>{item.name}</Text>
            <ScrollView horizontal>
              <Text style={styles.listItem}>{fixture}</Text>
            </ScrollView>
          </View>
        </View>
  )
}
    />
  </ScrollView>
)

FixturesScreen.navigationOptions = {
  tabBarTestIDProps: {
    testID: 'TEST_ID_HOME',
    accessibilityLabel: 'TEST_ID_HOME_ACLBL',
  },

  tabBarLabel: 'Main',
  tabBarIcon: ({ tintColor, focused }) => (
    <Ionicons
      name={focused ? 'ios-home' : 'ios-home-outline'}
      size={26}
      style={{ color: tintColor }}
    />
  ),
}

export default FixturesScreen

所以基本上我想做的是在平面列表中声明homeTeam，awayTeam和Fixture，因此我可以在平面列表中进行if/else条件渲染.我可以在flatlist组件之外实现该功能，但这是不对的，因为我无法一次比较所有对象.

So basically what i'm trying to do is declare homeTeam, awayTeam and Fixture inside the flatlist, so i can do an if/else conditional rendering inside the flatlist. I can achieve that outside the flatlist component but it is not right, because i can not compare all objects at once.

推荐答案

同时使用箭头功能 () => ('someValue')是() => { return 'someValue'}的快捷方式.

While using arrow functions () => ('someValue') is a shortcut for () => { return 'someValue'}.

(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
// equivalent to: (param1, param2, …, paramN) => { return expression; }

// Parentheses are optional when there's only one parameter name:
(singleParam) => { statements }
singleParam => { statements }

// A function with no parameters should be written with a pair of parentheses.
() => { statements }

// Parenthesize the body of function to return an object literal expression:
params => ({foo: bar})

因此，如果要在返回值之前运行一些代码，则应执行以下操作；

So if you want to run some code before returning a value you should do like below;

const FixturesScreen = ({ navigation }) => (
  <ScrollView style={styles.container}>
    <FlatList
      data={clubData.data.clubs}
      renderItem={({ item }) => { //change to curly braces
        let fixture = item.name;
        // do something here

        return (
          <View>
            <View>
              <Text style={styles.itemTitle}>{item.name}</Text>
              <ScrollView horizontal>
                <Text style={styles.listItem}>{fixture}</Text>
              </ScrollView>
            </View>
          </View>
        );
      }}
    />
  </ScrollView>
)

这篇关于尝试在React Native中在平面列表内声明变量时出现意外令牌的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！