您好我正在尝试在项目中执行switch语句。我有一个对象图像如下
export const images = [
{
image: BASE.URL + 'Images/Plumber.png',
},
{
image: BASE.URL + 'Images/electrician.png',
},
{
image: BASE.URL + 'Images/ac.png',
}
]
我正在从服务器获取工作人员列表并在
Card
中进行渲染。因此服务器响应中仅包含工作人员的名称。我试图将图像与它们一起提供,因此我编写了switch语句,但图片不随文字一起出现。以下是我的代码。 import { images } from './data';
renderImage() {
const { workType } = this.state;
switch (workType) {
case 'Plumber':
return (
<Image style={{ height: 100, width: 100 }} source={{ uri: images[0].image }} />
);
case 'Electrician':
return (
<Image style={{ height: 100, width: 100 }} source={{ uri: images[1].image }} />
);
case 'AC'
return (
<Image style={{ height: 100, width: 100 }} source={{ uri: images[2].image }} />
);
}
}
render(){
const { workers,workType } = this.state;
return(
{workers.map((a, index) => (
<TouchableOpacity onPress={() => this.popUpDialog(a.id, a.work_type)}>
<Card>
{this.renderImage()}
<Text>{a.work_type}</Text>
</Card>
</TouchableOpacity>
))}
)
}
我做错了什么,请帮助我找到解决方案。谢谢!
最佳答案
尝试console.log
您的this.state.workType
,因为它可能不是您认为应该的值。由于您没有default
大小写,因此该函数不返回任何内容。
同样,如果将workType
用作renderImage
函数的参数,则可能会更容易。我怀疑您的this.state.workType
与a.work_type
函数中的workers.map
不相同。你可以这样
const renderImage = (workType) => {
switch (workType) {
...
}
}
//and then
workers.map((a, index) => (
<TouchableOpacity onPress={() => this.popUpDialog(a.id, a.work_type)}>
<Card>
{this.renderImage(a.work_type)}
<Text>{a.work_type}</Text>
</Card>
</TouchableOpacity>
))