応答ネイティブのフラットリスト内で変数を宣言しようとすると予期しないトークンが発生する

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だから基本的に私は何をしようとしている

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 

をcdoeあるflatlist内homeTeam、awayTeamとフィクスチャを宣言しているので、私は/それ以外の場合は、条件付きレンダリングを行うことができますフラットリストの中に。私はflatlistコンポーネントの外でそれを達成することができますが、私はすぐにすべてのオブジェクトを比較することはできませんので、それは正しくありません。

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> 
)