接受到的类型不兼容的值：应为<数字>，但得到的不是数字值。改为使用0。这样的警告怎么解决？

Question

做了个星星的评分组件，但是一直就报出警告，如图中的两个警告怎么解决，要怎么改？如图

代码如下：

<!--components/stars/stars.wxml-->代码

<view class="rate-group">
   <image class="rate-image" wx:for="{{lights}}" wx:key="*this" src="../../images/rate-light.png" />
   <image class="rate-image" wx:for="{{halfs}}" wx:key="*this" src="../../images/rate-half.png" />
   <image class="rate-image" wx:for="{{grays}}" wx:key="*this" src="../../images/rate-gray.png" />
   <text class="rate-text">{{startext}}</text>
</view>

// components/stars/stars.ts代码

properties: {
    rate: {
      type:Number,
      value: []
    }
  },

lifetimes: {
    attached: function () {
      var that = this;
      // console.log(that.properties.rate);
      var rate = that.properties.rate;
        var intRate = parseInt(rate);
        var light = parseInt(intRate / 2);
        var half = intRate % 2;
        var gray = 5 - light - half;
        var lights = [];
        var halfs = [];
        var grays = [];
        for (var index = 1; index <= light; index++) {
          lights.push(index);
        }
        for (var index = 1; index <= half; index++) {
          halfs.push(index);
        }
        for (var index = 1; index <= gray; index++) {
          grays.push(index);
        }
      var startext = rate && rate > 0 ? rate.toFixed(1) : "未评分";
      that.setData({
        lights: lights,
        halfs: halfs,
        grays: grays,
        startext: startext
      })
    }

pages页面代码
      <starts rate="{{item.rating.value}}"></starts>

Answer 1

【以下回答由 GPT 生成】

问题解答：

根据提供的代码和问题描述，问题是由于传入的rate值的类型不兼容导致的警告。为了解决这个问题，需要将rate的类型修改为字符串，并在代码中进行适当的数据类型转换。

下面是修改后的代码示例：

<!-- components/stars/stars.wxml -->
<view class="rate-group">
   <image class="rate-image" wx:for="{{lights}}" wx:key="*this" src="../../images/rate-light.png" />
   <image class="rate-image" wx:for="{{halfs}}" wx:key="*this" src="../../images/rate-half.png" />
   <image class="rate-image" wx:for="{{grays}}" wx:key="*this" src="../../images/rate-gray.png" />
   <text class="rate-text">{{startext}}</text>
</view>

// components/stars/stars.ts代码

properties: {
    rate: {
      type: String,  // 将类型改为字符串
      value: '0'  // 默认值改为字符串类型
    }
},

lifetimes: {
    attached: function () {
      var that: any = this;  // 将类型转换为any类型
      var rate: string = that.properties.rate;  // 将rate的类型改为字符串
      var intRate: number = parseInt(rate);  // 将转换的结果类型定义为number
      // 其他相关代码...
    }
}

通过以上修改，你应该能够解决接受到的类型不兼容的值警告问题。这样就能正确使用组件并传入合适的rate值。

【相关推荐】

• 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/769613
• 这篇博客也不错, 你可以看下异步调用接口返回大量数据，如何处理才能使页面渲染时不卡？
• 您还可以看一下 韦语洋（Lccee）老师的一机一码加密、被破解自动销毁随时授权回收升级系列视频课程课程中的 提交软件库说明与课程最后的提示小节, 巩固相关知识点
  
• 除此之外, 这篇博客: 遍历数组，利用数组内的值查询数据库数据，将数据库查询出来的值重新组成一个数组中的 遍历数组，利用数组内的值查询数据库数据，将数据库查询出来的值重新组成一个数组。 部分也许能够解决你的问题。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^