微信小程序中的JavaScript问题

Question

大家好，我的微信小程序的某页面中有一个循环渲染的navigator组件：

<navigator class="navigator1" wx:for="{{Xianfeng}}" wx:key="index" url="{{item.url}}" style="background-color:{{backgroundColor1}}">
      <image class="characterAva" src="{{item.img}}"></image>
       ···
      <view>{{item.name}}</view>
</navigator>

然后其中的“Xianfeng”数组长这样：

总共18条数据，每一个当中都有name、star、launchtime、img、url 5个字段
我想实现当其中的star分别为6、5、4等时改变backgroundColor1的值的功能
请问我的代码有什么问题：

data: {  //页面的初始数据
    backgroundColor1: "",
    Xianfeng: [] 
  },
  onLoad(options) {
    this.getCharacterData();  //页面加载时触发获取数据的函数
  },
  getCharacterData: function () {  //从云储存获取Xianfeng数组的数据
    wx.cloud.init({
      env: 'cloud1-9gz4etsv445a38t360'
    })
    const db = wx.cloud.database()
    db.collection('xianfeng').get({
      success: (res) => {
        console.log(res.data);
        const Xianfeng = res.data;
        this.setBackgroundColor(Xianfeng)  //成功后触发改变背景颜色的函数
        this.setData({
          Xianfeng: Xianfeng  //将获取到的数据储存到Xianfeng数组
        })
      }
    })
  },
  setBackgroundColor(Xianfeng) {  //根据Xianfeng数组中每一项star的值改变背景颜色
    const backgroundColor1 = []; 
    for (let i = 0; i < Xianfeng.length; i++) {
      if (Xianfeng[i].star === 6) {
        backgroundColor1.push("#fdf475");
      } 
      else if (Xianfeng[i].star === 5){
        backgroundColor1.push("#ff0000")  //只写了两种star的变化情况因为这个时候代码已经没有实现我想要的效果了
      }
    }
    this.setData({
      backgroundColor1: backgroundColor1,
    });
  },

十分感谢大家的回答，ps：鄙人是相关领域的初学者和自学者，如有专业名词表述不当的情况敬请海涵

Answer 1

你代码的思路貌似有些问题