在 map 函数中切换条件语句答案

【问题标题】：Switch conditional statement inside map function在 map 函数中切换条件语句
【发布时间】：2019-07-31 05:10:04
【问题描述】：

我在 react-native 中映射对象数组：

const status_image = [
            {
                image: require("../../assets/claimsImages/Question.png")
            },
            {
                image: require("../../assets/claimsImages/Approved.png")
            },
            {
                image: require("../../assets/claimsImages/In Process.png")
            },
            {
                image: require("../../assets/claimsImages/Cancelled.png")
            }
        ]

        this.state = {
            newdata: [],
            images: status_image,

        }


render(){
        var img = this.state.images.map( val => val.image);

        const claimData = this.state.newdata.map((val, index) => {
            return (
                <View key={index} style={{flexDirection: 'row', justifyContent: 'space-between', margin: 15,}}>

                        <View style={{ borderBottomWidth: 1,borderBottomColor: '#A6ACAF' }}>
                            <Text>EW</Text>
                            {val.claim_approval_status.map((status, i) => (

                                    <View style={{marginVertical: 12}}>
                                        <Image
                                            style={styles.stretch}
                                            source={img[i]}
                                        />
                                    </View>
                            ))}
                        </View>
                        <View>
                        {val.claim_approval_status.map((status, i) => (

                            <View style={{marginTop: 36}}>
                                <Text>{status}</Text>
                            </View>
                        ))}
                    </View>
                </View>
            )
    });
        return (
            <View>
                {claimData}
            </View>
        )

    }

我想要实现的是图像应该基于状态值进行映射，即如果我的 val.claim_approval_status 等于“问题”，那么图像“问题.png”应该呈现在前面那个状态。如果 val.claim_approval_status 等于 'approved'，则图像为 'Approved.png'。

所有这些状态值都与图像一起映射在一个表格中，只是图像需要按照它们的状态值显示。

我同样尝试了以下 switch case 方法，但在实现时感到困惑。

componentDidMount(){
    this.state.newdata.map((x, i) => {
                x.claim_approval_status.map((y, i) => {
                    let status = y;
                    console.log(status) //this gives four status values 
                                        'question, approved, inprocess, 
                                         cancelled'
                });

           });

    var status_values = this.state.images.map((val, i) =>
      {
       switch (i) {
        case 1:
          // something to append that image in status data mapping
          break;
        case 2:
           // something to append that image in status data mapping
          break;
        case 3:
           // something to append that image in status data mapping
          break;
      }
     }
      // ...
    );
}

我怎样才能达到这个结果？任何帮助表示赞赏。

【问题讨论】：

标签： javascript react-native switch-statement

【解决方案1】：

您可以应用最简单的方法，而不是 switch case，通过将对象键分配为状态代码，如下所示：

const status_image = 
    {
        question: require("../../assets/claimsImages/question.png"),
        approved: require("../../assets/claimsImages/approved.png"),
        inprocess: require("../../assets/claimsImages/inprocess.png"),
        cancelled: require("../../assets/claimsImages/cancelled.png")
    };

一旦你得到回应，你就可以使用

<Image 
    style={styles.stretch}
    source={status_image[status]}
/>

【讨论】：

您需要确保来自 api 的响应和您的图像的密钥应该相同。
是的，它是一样的。 Approved.png ， In Process.png 和来自响应："claim_approval_status": [ "Approved", "In Process" ]
从您的评论中我可以看出它不一样，“已批准”与“已批准”不一样，“处理中”也不与“处理中”相同
在问题中我用小写字母写了下来。实际是我上面提到的一个。抱歉，有问题中的拼写错误。
正如我所说，它必须相同，只需将 json 对象键替换为您得到的响应即可。