您好我正在尝试在我的项目中执行switch语句。我有一个对象图像如下
export const images = [
{
image: BASE.URL + 'Images/Plumber.png',
},
{
image: BASE.URL + 'Images/electrician.png',
},
{
image: BASE.URL + 'Images/ac.png',
}
]
我正在从服务器获取工作人员列表并将其呈现在Card
.so中,因此服务器响应中仅包含工作人员的名称。我正在尝试将图像与它们一起提供,因此我编写了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>
))
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句