Question

class PostBodyRatingStars extends React.Component {
  render() {
    const { classes } = this.props
    var rating = this.props.rating

    function createMappingArray(rating) {
      var arr = []
      for (i = 0; i < 5; i++) {
        if (rating >= 1) {
          arr.push('1')
          rating = rating--
        } else if (rating == 0.5) {
          arr.push('0.5')
        } else arr.push('0')
      }
      return arr
    }

    function createStars(arr) {
      for (let i = 0; i < arr.length - 1; i++) {
        switch (arr[i]) {
          case '0':
            return <StarBorder />
          case '0.5':
            return <StarHalf />
          case '1':
            return <Star />
        }
      }
    }

    return (
      <div>
        {arr.map(n => {
          createStars(n)
        })}
      </div>
    )
  }
}

这里的想法是根据评分变量创建一个数组，该数组将使用createMappingArray函数包含5个元素：0、0.5或1。

然后使用createStars函数作为映射参数在该数组上进行映射，并生成5个星星（全半或空）。星形组件是material-ui图标。

ReferenceError：未定义arr

我很确定这里不仅有一个问题，我对Vanilla JS的了解也不大。

非常感谢您的帮助。

Answer 1

看起来好像没有在任何地方调用createMappingArray一样。

createStars的目的是什么？取一个值并返回一个星星，还是取一个值数组并返回一个星星数组？现在，它需要一个数组，但只要将第一个元素与它的星形匹配就返回。

我认为您可能打算这样做：

class PostBodyRatingStars extends React.Component {
  render() {
    const { classes } = this.props
    var rating = this.props.rating

    function createMappingArray(rating) {
      var arr = []
      for (i = 0; i < 5; i++) {
        if (rating >= 1) {
          arr.push('1')
          rating = rating--
        } else if (rating == 0.5) {
          arr.push('0.5')
        } else arr.push('0')
      }
      return arr
    }

    function pickStar(star) {
        switch (star) {
          case '0':
            return <StarBorder />
          case '0.5':
            return <StarHalf />
          case '1':
            return <Star />
        }
      }
    }

    return (
      <div>
        {createMappingArray(rating).map(n => {
          pickStar(n)
        })}
      </div>
    )
  }
}

我认为您可能会因为以下事实而感到困惑：您声明的函数的参数名称与其他变量（例如，评级）相同。这不会执行该功能，您必须单独执行该操作，并为其提供要使用的参数值。

我正在尝试为产品生成评级星，评级值（0到5）已经用作道具

1 个答案: