Javascript 为什么我的映射函数返回视图不起作用？

我创建了一个ListView，并给出它的id是0、1、2

在我的例子中，当我在我的

renderDescription

函数中单击id为1的

ListItem

时，我可以看到设备上显示的

TextView

但是如果我单击id为0的

列表项

，我就看不到任何

文本视图

。我可以看到

第一个文本

和

第二个文本

日志。所以我认为map函数是正确的，我不明白为什么当id为0时我的设备上没有TextView

任何帮助都将不胜感激。提前谢谢

以下是MyListItem.js：

import React, { Component } from 'react';
import { 
  Text, 
  Button,
  TouchableWithoutFeedback, 
  TouchableOpacity,
  View,
  LayoutAnimation 
} from 'react-native';
import { List, ListItem } from 'react-native-elements';

class MyListItem extends Component {
  state = {
    expanded: false,
    icon: 'keyboard-arrow-down'
  };
  componentWillUpdate() {
    LayoutAnimation.spring();
  }


  renderDescription(id) {
    const { item } = this.props;
    const cityButtons = [
        {
          text: 'First text',
        }, 
        {
          text: 'Second Text',         
        }
    ];

    if (this.state.expanded) {
        switch(id) {
        case 0:
          cityButtons.map(value => {
            console.log(value.text);
            console.log('Why return is no working ?');
            return (
              <TouchableOpacity 
                style={styles.button}
                onPress={() => console.log('Press !')}
              >                  
                <Text style={styles.buttonText}>{value.text}</Text>
              </TouchableOpacity>
            );
          });
        break;
        case 1:
          return (
              <TouchableOpacity 
                style={styles.button}
                onPress={() => console.log('Press !')}
              >
                <Text style={styles.buttonText}>I can see the TextView on device</Text>
              </TouchableOpacity>

          );   
        break;       
    }
    }
  }

  changeExpanded() {
    this.setState({ 
        expanded: !this.state.expanded, 
        icon: this.state.expanded ? 'keyboard-arrow-down': 'keyboard-arrow-up' 
    });
    console.log('change!');
  }

  render() {
    const { titleStyle } = styles;
    const { title, icon, id } = this.props.item;

    return (
      <TouchableWithoutFeedback
        onPress={() => this.changeExpanded()}
      >
        <View>
          <ListItem
            key={id}
            title={title}
            containerStyle={{ backgroundColor: '#81A3A7' }}
            titleStyle={{ color: '#ffffff' }}
            rightIcon={{ name: this.state.icon }}
          />
          <View style={styles.center}>
            {this.renderDescription(id)}
          </View>
        </View>
      </TouchableWithoutFeedback>
    );
  }
}

const styles = {
    center: {
        flex: 1,
        justifyContent: 'flex-start',
        alignItems: 'flex-start',
        backgroundColor: '#C2D3DA'
      },
      button: {
        flex: 1,
        width: '100%',
        margin: 0,
        padding: 10,
        paddingLeft: 18,
        backgroundColor: '#C2D3DA',
        borderRadius: 9,
      },
      buttonText: {
        color: '#585A56',
        fontSize: 15,
        fontWeight: 'bold',
      },
};

export default MyListItem;

import React，{Component}来自'React'；
导入{
文本，
按钮
可触摸且无反馈，
可触摸不透明度，
看法
布局动画
}从“反应本机”；
从“react native elements”导入{List，ListItem}；
类MyListItem扩展组件{
状态={
扩展：错，
图标：“键盘向下箭头”
};
componentWillUpdate（）{
layoutimation.spring（）；
}
渲染描述（id）{
const{item}=this.props；
常数城市按钮=[
{
文本：“第一个文本”，
}, 
{
文本：“第二个文本”，
}
];
if（this.state.expanded）{
开关（id）{
案例0：
cityButtons.map（值=>{
console.log（value.text）；
log（'为什么返回不起作用？'）；
返回(
console.log（'Press！'）}
>                  
{value.text}
);
});
打破
案例1：
返回(
console.log（'Press！'）}
>
我可以在设备上看到TextView
);   
打破
}
}
}
变更扩展（）{
这个.setState（{
展开：！this.state.expanded，
图标：this.state.expanded？“键盘箭头向下”：“键盘箭头向上”
});
console.log（'change！'）；
}
render（）{
常量{titleStyle}=样式；
const{title，icon，id}=this.props.item；
返回(
this.changeExpanded（）}
>
{this.renderDescription（id）}
);
}
}
常量样式={
中心：{
弹性：1，
justifyContent:“flex start”，
alignItems:'flex start'，
背景颜色：“#C2D3DA”
},
按钮：{
弹性：1，
宽度：“100%”，
保证金：0，
填充：10，
paddingLeft:18，
背景颜色：“#C2D3DA”，
边界半径：9，
},
按钮文字：{
颜色：“#585A56”，
尺寸：15，
fontWeight:'粗体'，
},
};
导出默认MyListItem；

尝试这样修复，它仍然不起作用（consloe日志可以看到值）

案例0：
返回cityButtons.map（值=>{
console.log（value.text）；
console.log（'Press！'）}
>                  
{value.text}
});
打破

您需要将贴图中的值返回到函数中才能渲染它

    return cityButtons.map(value => (
          <TouchableOpacity 
            style={styles.button}
            onPress={() => console.log('Press !')}
          >                  
            <Text style={styles.buttonText}>{value.text}</Text>
          </TouchableOpacity>
        );
      );

返回cityButtons.map（值=>(
console.log（'Press！'）}
>                  
{value.text}
);
);

您需要将贴图中的值返回到函数中才能渲染它

    return cityButtons.map(value => (
          <TouchableOpacity 
            style={styles.button}
            onPress={() => console.log('Press !')}
          >                  
            <Text style={styles.buttonText}>{value.text}</Text>
          </TouchableOpacity>
        );
      );

返回cityButtons.map（值=>(
console.log（'Press！'）}
>                  
{value.text}
);
);

谢谢你的回复，我尝试用你的建议来解决它。但它仍然不起作用。我在我的问题中更新了它。您已经从

TouchableOpacity

中删除了返回值，非常感谢！我现在明白了。解决这个问题。谢谢Pritish。谢谢你的回复，我试着用你的建议来解决它。但它仍然不起作用。我在我的问题中更新了它。您已经从

TouchableOpacity

中删除了返回值，非常感谢！我现在明白了。解决这个问题。谢谢你，普里蒂什。