尝试在 react native 中声明 flatlist 中的变量时出现意外令牌

Question

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

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

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 条件渲染。我可以在平面列表组件之外实现它，但这是不对的，因为我无法一次比较所有对象。

Answer 1

虽然使用 arrow functions () => ('someValue') 是 () => { 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})

因此，如果您想在返回值之前运行一些代码，您应该像下面那样做；

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 中声明 flatlist 中的变量时出现意外令牌

unexpected token when trying to declare a variable inside flatlist in react native

reactjs

react-native

native

react-native-flatlist