Строка кода дает мне сообщение об ошибке «Ошибка при рендеринге:« RangeError: Неверная длина массива »», однако, строка все еще делает то, что она должна делать - PullRequest
0 голосов
/ 18 апреля 2019

Строка кода должна округлять число с плавающей точкой, а затем отображать звезды, равные этому рейтинговому числу. Странно, строка кода делает то, что она должна делать, однако она также дает мне ошибку Error in render: "RangeError: Invalid array length"

<p>Rating: <i v-for='n in Math.round(sight.rating)' class="rating-stars fas fa-star"></i></p>

Если я заменю Math.round (sight.rating) действительным целым числом, я не получу ошибку. Если я заменяю его числом с плавающей точкой, я получаю ошибку, поэтому я предполагаю, что это ошибка числа с плавающей точкой. Однако, если я не ошибаюсь, Math.round (sight.rating) должен вернуть int, верно?

Прицельный объект:

{
  "address_components": [
    {
      "long_name": "3",
      "short_name": "3",
      "types": [
        "premise"
      ]
    },
    {
      "long_name": "10",
      "short_name": "10",
      "types": [
        "sublocality_level_4",
        "sublocality",
        "political"
      ]
    },
    {
      "long_name": "2-chōme",
      "short_name": "2-chōme",
      "types": [
        "sublocality_level_3",
        "sublocality",
        "political"
      ]
    },
    {
      "long_name": "Toranomon",
      "short_name": "Toranomon",
      "types": [
        "sublocality_level_2",
        "sublocality",
        "political"
      ]
    },
    {
      "long_name": "Minato City",
      "short_name": "Minato City",
      "types": [
        "locality",
        "political"
      ]
    },
    {
      "long_name": "Tōkyō-to",
      "short_name": "Tōkyō-to",
      "types": [
        "administrative_area_level_1",
        "political"
      ]
    },
    {
      "long_name": "Japan",
      "short_name": "JP",
      "types": [
        "country",
        "political"
      ]
    },
    {
      "long_name": "105-0001",
      "short_name": "105-0001",
      "types": [
        "postal_code"
      ]
    }
  ],
  "adr_address": "<span class=\"street-address\">2-chōme-10-3 Toranomon, Minato City</span>, <span class=\"region\">Tōkyō-to</span> <span class=\"postal-code\">105-0001</span>, <span class=\"country-name\">Japan</span>",
  "formatted_address": "2-chōme-10-3 Toranomon, Minato City, Tōkyō-to 105-0001, Japan",
  "formatted_phone_number": "03-3583-0781",
  "geometry": {
    "location": {
      "lat": 35.6670115,
      "lng": 139.7433683
    },
    "viewport": {
      "northeast": {
        "lat": 35.6683604802915,
        "lng": 139.7447172802915
      },
      "southwest": {
        "lat": 35.6656625197085,
        "lng": 139.7420193197085
      }
    }
  },
  "icon": "https://maps.gstatic.com/mapfiles/place_api/icons/museum-71.png",
  "id": "2398d5f2d109e85f2d4d1f3b76a0ff0c64d7b685",
  "international_phone_number": "+81 3-3583-0781",
  "name": "Okura Museum of Art (Okura Shukokan)",
  "photos": [
    {
      "height": 3080,
      "html_attributions": [
        "<a href=\"https://maps.google.com/maps/contrib/101996694022263068076/photos\">Pene Clitoride</a>"
      ],
      "photo_reference": "CmRaAAAAABc3LWvw8Z9y50ailegR1cxwNYsdwDKNlqYc3p0x23GJE80IeTjWcegp7yRHdAKXQ3RgOV4NAkwdAoawJ-rhsiIqOjbby44hGzhxVD35VYfSpU6lSfcZLHUKrcoiSlDFEhCMV_EWgEZ3njumqeYTpOa0GhRRZ96km2C-Pru-Tk_9TpBQDI1PeQ",
      "width": 5472
    },
    {
      "height": 5472,
      "html_attributions": [
        "<a href=\"https://maps.google.com/maps/contrib/110122217716740147589/photos\">Maria Colonna</a>"
      ],
      "photo_reference": "CmRaAAAAJ36EEeDQxR3aDicXodZ4VoBKQFfVEUKY_r_2tumrrTvZAsrZFypLG0trx4RSPR18f9dMHeF8XePTkEzntwf8aIg1PDS994jP6447B4MCTH9ILDztS3GvPCYT94VKVIYwEhA98am5HDQ9GYDu4FQioNizGhR3hivoKGbC61--_Lp3Wcdaf8uvIg",
      "width": 3080
    }
  ],
  "place_id": "ChIJC5-nF5CLGGAR9M3JUrPsBj8",
  "plus_code": {
    "compound_code": "MP8V+R8 Tokyo, Japan",
    "global_code": "8Q7XMP8V+R8"
  },
  "rating": 2.7,
  "reference": "ChIJC5-nF5CLGGAR9M3JUrPsBj8",
  "reviews": [
    {
      "author_name": "作田知樹",
      "author_url": "https://www.google.com/maps/contrib/112232926057787995756/reviews",
      "language": "en",
      "profile_photo_url": "https://lh6.googleusercontent.com/-MSSR5BJRciM/AAAAAAAAAAI/AAAAAAAAAAA/ACHi3rfxQ43JGCXYylp5GJBrww3TdvDEUQ/s128-c0x00000000-cc-rp-mo-ba4/photo.jpg",
      "rating": 3,
      "relative_time_description": "a year ago",
      "text": "Closed until 2019.",
      "time": 1520830709
    },
    {
      "author_name": "hillary c",
      "author_url": "https://www.google.com/maps/contrib/111913221922184324953/reviews",
      "language": "en",
      "profile_photo_url": "https://lh3.googleusercontent.com/-3c8oNLLlw-4/AAAAAAAAAAI/AAAAAAAAADE/tFcg16xSZXw/s128-c0x00000000-cc-rp-mo-ba3/photo.jpg",
      "rating": 2,
      "relative_time_description": "3 years ago",
      "text": "Closed for renovations for four years, starting in April of 2015",
      "time": 1431984440
    },
    {
      "author_name": "おおほりまこと",
      "author_url": "https://www.google.com/maps/contrib/116946076996856905143/reviews",
      "language": "ja",
      "profile_photo_url": "https://lh3.googleusercontent.com/-FyN5KLlV37I/AAAAAAAAAAI/AAAAAAAAAAA/ACHi3rdybVohcNv6MAr8pOt-2tYysm1r8g/s128-c0x00000000-cc-rp-mo-ba6/photo.jpg",
      "rating": 4,
      "relative_time_description": "2 months ago",
      "text": "休館中、建物は国の重要文化財です。",
      "time": 1549283359
    },
    {
      "author_name": "chun li lin",
      "author_url": "https://www.google.com/maps/contrib/105258621249998744671/reviews",
      "language": "zh",
      "profile_photo_url": "https://lh5.googleusercontent.com/-3j1Np8bGGGA/AAAAAAAAAAI/AAAAAAAAAAA/ACHi3reG0rVSFGsxyhQQcWlXxRapQAc5KA/s128-c0x00000000-cc-rp-mo-ba4/photo.jpg",
      "rating": 4,
      "relative_time_description": "a year ago",
      "text": "整修中",
      "time": 1521062392
    },
    {
      "author_name": "Yoshio Akiyama",
      "author_url": "https://www.google.com/maps/contrib/109720304741660602673/reviews",
      "profile_photo_url": "https://lh5.googleusercontent.com/-KLvOxW89_gc/AAAAAAAAAAI/AAAAAAAAAAA/ACHi3rdznxqHNfDH5dkIZemt90WBpJZV-w/s128-c0x00000000-cc-rp-mo/photo.jpg",
      "rating": 1,
      "relative_time_description": "3 months ago",
      "text": "",
      "time": 1547060834
    }
  ],
  "scope": "GOOGLE",
  "types": [
    "museum",
    "point_of_interest",
    "establishment"
  ],
  "url": "https://maps.google.com/?cid=4541577529181982196",
  "user_ratings_total": 11,
  "utc_offset": 540,
  "vicinity": "2 Chome-10-3 Toranomon, Minato City",
  "website": "http://www.shukokan.org/"
}

Ответы [ 2 ]

1 голос
/ 18 апреля 2019

Эта ошибка возникает, когда массив строится с неположительно-целым числом, например:

new Array(3.14)
new Array(-1)
new Array(NaN)
new Array(Infinity)

Возможно, Math.round(sight.rating) возвращает NaN?Это может произойти, если sight.rating равно undefined.

Отложить отрисовку рейтинга, пока sight.rating не получит значение, чтобы избежать этой ошибки:

<!-- Don't render the rating at all -->
<p v-if="sight.rating != null">
  Rating: <i v-for='n in Math.round(sight.rating)' class="rating-stars fas fa-star"></i>
</p>

<!-- Or render a 0-rating. Whatever works for you. -->
<p>
  Rating: <i v-for='n in Math.round(sight.rating || 0)' class="rating-stars fas fa-star"></i>
</p>
0 голосов
/ 18 апреля 2019

Рейтинг:

Я думаю, вам нужно проверить, доступна ли rating во всех элементах индекса массива или нет.

Если рейтинг недоступен, вам нужно поставить некоторыеусловие там,

иначе вы можете попробовать ниже код.Надеюсь, это сработает.

<div id="app">
  <p>Rating: <span v-for='n in Math.round(sight.rating || 1)'>⭐</span></p>
</div>

Проверьте здесь скрипку Спасибо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...