javascript - react .js : function not returning CSS when using Map

Question

我有一个函数可以映射一个数组并检查每条记录的状态。每个月都有状态 1、2 或 3，这些状态在 if 语句中检查。然后这些返回一些改变图标颜色的 CSS。

_infoIconStyle() {

    //test array
    let monthArr = [
        {month:'jan', status: 1},
        {month:'feb', status: 2},
        {month:'mar', status: ''},
        {month:'apr', status: 1},
        {month:'may', status: 2},
        {month:'jun', status: ''},
        {month:'jul', status: 1},
        {month:'aug', status: 2},
        {month:'sep', status: ''},
        {month:'oct', status: 1},
        {month:'nov', status: 2},
        {month:'dec', status: ''}
    ]
    //

    monthArr.map((monthRecord) => {

        if(monthRecord.status == 1) {
            const infoStyle = { 
                color:  "red"
            };

            return infoStyle

        } else if(monthRecord.status  == 2) {
            const infoStyle = { 
                color:  "orange"
            };

            return infoStyle

        } else {
            const infoStyle = { 
                color:  "green"
            };

            return infoStyle

        } 
    })
}

在没有 map 的情况下，我在 console.log 中看到的正是我所期望的。但是因为我添加了 map 没有 CSS 被返回。

我使用 ES6 的时间不长，但我确信它很简单。有人可以帮忙吗..谢谢。

Answer 1

因为您没有从 _infoIconStyle 函数返回任何内容。另一件事是 ma​​p 将返回一个数组而不是单个 css 对象。

返回 map 结果:

_infoIconStyle(){
   ....
   return monthArr.map((monthRecord) => {   //use return here
       ....
   }
   ....
}

如果返回 map 结果，_infoIconStyle 函数将返回什么:

[{...}, {...}, {...}, {..}, {...}, ....]