Reactjs 尝试在react native中的flatlist内声明变量时出现意外标记

我试图在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>
)

constfixturesscreen=（{navigation}）=>(
(
let fixture=item.name//意外标记
{item.name}
{fixture}
)
}
/>
)

这是我的全部固定屏幕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

从“React”导入React
从“react native”导入{视图、文本、平面列表、滚动视图、样式表}
从“反应本机向量图标/Ionicons”导入Ionicons
从“../../clubData”导入clubData
const styles=StyleSheet.create({
容器：{
背景颜色：“#4BABF4”，
},
项目名称：{
颜色：'黑色'，
尺寸：20，
玛金托普：20，
marginBottom:10，
marginLeft:15，
},
列表项：{
颜色：“#FFFFFF”，
尺码：18，
textAlign:'中心'，
marginRight:15，
marginLeft:15，
背景颜色：“#77BEF5”，
宽度：120，
填充垂直：10，
},
})
const CURRENTTGAMEWEEK=30
常数i=CURRENTTGAMEWEEK
常数nxt1=i+1
常数nxt2=nxt1+2
常数nxt3=nxt2+1
常数nxt4=nxt3+1
常数nxt5=nxt4+1
//让夹具
//const team=clubData.data.clubs[0]。名称
//const hTeam=clubData.data.clubs[0]。fixture[0]。主队
//const hTeamShort=clubData.data.clubs[0]。fixture[0]。homeTeamShort
//const aTeamShort=clubData.data.clubs[0]。fixture[0]。awayTeamShort
// 
//如果（团队===hTeam）//正在工作
//夹具=aTeamShort
//否则
//夹具=hTeamShort
log（`Now is playing${fixture}`）
常量FixturesScreen=（{navigation}）=>(
(
设fixture=item.name
{item.name}
{fixture}
)
}
/>
)
FixturesScreen.navigationOptions={
tabBarTestIDProps：{
testID:“测试”ID“回家”，
accessibilityLabel:'TEST\u ID\u HOME\u ACLBL'，
},
tabBarLabel:'Main'，
tabBarIcon:（{tintColor，focused}）=>(
),
}
导出默认修复程序屏幕

所以基本上我要做的是在平面列表中声明homeTeam、awayTeam和Fixture，这样我就可以在平面列表中进行if/else条件渲染。我可以在flatlist组件之外实现这一点，但这是不对的，因为我不能同时比较所有对象。

使用

（）=>（'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>
)

constfixturesscreen=（{navigation}）=>(
{//更改为大括号
设fixture=item.name；
//在这里做点什么
返回(
{item.name}
{fixture}
);
}}
/>
)