Question

我正在对本机对象数组进行映射：

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.png”。

所有这些状态值都与图像一起映射到一个表中，只是图像需要根据其状态值出现。

我同样尝试了以下切换案例的方法，但是在执行时感到困惑。

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

可以通过分配对象键作为状态码来代替开关情况，如下所示：

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

在map函数内切换条件语句

1 个答案: