你好,我想在我的项目中做 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
与 workers.map
函数中的 a.work_type
不同。你可以这样做
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>
))
关于javascript - 如何在 React Native 中使用 switch 进行条件渲染?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55390891/