예기치 않은 토큰이 반응식 네이티브에서 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 그래서 기본적으로 내가 flatlist 내부 homeTeam, awayTeam 및 비품을 선언 할 일은 노력하고있어

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 안쪽에. 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> 
)