javascript - map 函数中的 Switch 条件语句

Question

我在 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 等于“question”，那么图像“Question.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;
      }
     }
      // ...
    );
}

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

Answer 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]}
/>