Question

我想根据我的列表 currentSelection 中的 x 个条目呈现 x 数量的对象。我尝试这样做，但我收到错误消息，指出由于某种原因无法找到 item。如果我能得到一些帮助，我将不胜感激！

相关代码：

                  currentSelection.map(item => {
                    <View key={item.value} style={{position: 'absolute', right: 10, bottom: -15}}>
                        <MaterialCommunityIcons name="star" color="red" size={20}/>
                    </View>
                  });

编辑语法错误：

                 currentSelection.map(item => {
                    return (
                        <View key={item.value} style={{position: 'absolute', right: 10, bottom: -15}}>
                            <MaterialCommunityIcons name="star" color="red" size={20}/>
                        </View>
                    ); //tried with ); and ) and got the same error
                  });

更多相关代码：

const renderItems = () => {
  currentSelection.map(item => {
    return (
      <View key={item.value} style={{position: 'absolute', right: 10, bottom: -15}}>
        <MaterialCommunityIcons name="star" color="red" size={20}/>
      </View>
    );
  });
}
return (
        <ScrollView>
            <View style={ [styles.iconPosition, {flexDirection:"row"}] }>
                <TouchableOpacity style={ styles.button } onPress={ () => navigation.dispatch(StackActions.pop(1))}>
                    <MaterialCommunityIcons name="arrow-left" color="red" size={30}/>
                </TouchableOpacity>
                <Image source = { Logo } style = { styles.iconSize } />
            </View>
            <View style={styles.tabBar}>
                <MaterialTabs
                    items={['Your Favorite Meals', 'Select Favorite Meals']}
                    selectedIndex={selectedTab}
                    onChange={setSelectedTab}
                    barColor="#ffffff"
                    indicatorColor="#000000"
                    activeTextColor="#000000"
                    inactiveTextColor="#908c8c"
                />
            </View>
            {selectedTab === 0 ? (
                <View>
                    <View style={ styles.selectMultipleView }>
                        <SelectMultiple
                          items={currentSelection}
                          selectedItems={removeSelection}
                          onSelectionsChange={onFavSelectionsChange}
                          />
                          {renderItems}
                    </View>

Answer 1

您可以创建一个函数来呈现所需数量的项目，然后在您需要的地方调用它：

const renderItems = () => {
  return currentSelection.map(item => {
    return (
      <View key={item.value} style={{position: 'absolute', right: 10, bottom: -15}}>
        <MaterialCommunityIcons name="star" color="red" size={20}/>
      </View>
    ); //there you obviously need to put it in a return
  });
}

然后在组件中的某处调用它

{renderItems()}

你可以看看例子here

第二种选择是这样做：

const renderItems = data.map(item => {
  return(<Text>{item}</Text>)
})

...
{renderItems}
...

基于循环渲染对象？

1 个答案: