Question

我正在尝试在本机渲染中进行嵌套循环，但是出现了意外的错误令牌。有人可以帮忙吗？

这是我的代码：

<ScrollView style={{backgroundColor: 'rgba(255, 0, 0, 0.1)'}}>
                { 

                    items.map((val,key) => {
                        return <View key={key}>
                            <Separator style={{backgroundColor: 'rgba(255, 0, 0, 0.1)'}}>
                                <Text>{key+1} - {val.title}</Text>
                            </Separator>
                            {
                                items[key].videos.map((value,index) => {
                                    return <ListItem noIndent key={index} style={{backgroundColor: 'rgba(255, 0, 0, 0.1)'}} onPress={() => this.setState({video_url: items[key].videos[index].video_url})}>
                                        <Body>
                                            <Text style={{paddingLeft: 25}}>{index+1} {value.title}</Text>
                                        </Body>
                                    </ListItem>
                                })
                                items[key].videos.map((value,index) => {
                                    return <ListItem noIndent key={index} style={{backgroundColor: 'rgba(255, 0, 0, 0.1)'}} >
                                        <Body>
                                            <Text style={{paddingLeft: 25}}>{index+1} {value.title}</Text>
                                        </Body>
                                    </ListItem>
                                })
                            }
                        </View>
                    })
                }
                </ScrollView>

这是我的错误 error image

Answer 1

keyExtractor = (item, index) => index.toString()

const ListItem = (props) => {
   return 
      <View>
        {props.items.videos.map(row => {
          return <View>row.title</View>;
        })}
      </View>

}

render () {
  return (
    <FlatList
      keyExtractor={this.keyExtractor}
      data={items}
      renderItem={items=> {
       return <ListItem {...items} />;
    />
  )

你能测试一下吗？。

嵌套循环React Native

1 个答案: