Оператор React Map

Question

Я пытаюсь объявить переменную "ratingVal", которой присваивается случайное значение no внутри оператора карты.Я хочу использовать переменную в компоненте рейтинга, а также отобразить ее на экране.Однако я получаю ошибку

Ошибка синтаксического анализа: неожиданный токен

Каков правильный синтаксис объявления переменной в этом случае?

renderProductsCardsList(products){

   return products.map(
     (product, i) =>

       let ratingVal = Math.floor(Math.random() * 5) + 1
       <Rating initialRating={ratingVal} readonly></Rating>
       <div>{ratingVal}</div>
   )
}

Answer 1

Вы не можете иметь оператор объявления внутри функции стрелки с неявным возвратом.Для этого используйте явный синтаксис возврата.Кроме того, вы не можете вернуть несколько элементов из метода карты.Оберните их в <React.Fragment>:

renderProductsCardsList(products){
   return products.map(
     (product, i) => {
       let ratingVal = Math.floor(Math.random() * 5) + 1
       return (
            <React.Fragment>
                <Rating initialRating={ratingVal} readonly></Rating>
                <div>{ratingVal}</div>
             </React.Fragment>
       )
   })
}

или оцените при назначении

renderProductsCardsList(products){
   return products.map(
     (product, i) => 
            <React.Fragment>
                <Rating initialRating={Math.floor(Math.random() * 5) + 1} readonly></Rating>
                <div>{ratingVal}</div>
             </React.Fragment>
   )
}

Answer 2

Два вопроса:

• Отсутствуют скобки после стрелки =>: скобки можно опускать только в том случае, если вы делаете неявный возврат в одну строку.

• Плавающий JSX вВаш код: я не уверен, что вы хотите сделать.В конце метода map есть две строки JSX.В настоящее время вы ничего не возвращаете.Но я думаю, вы хотите вернуть Rating компонент.

  renderProductsCardsList(products) { return products.map( (product, i) => { let ratingVal = Math.floor(Math.random() * 5) + 1 return <Rating initialRating={ratingVal} readonly></Rating> }) }

Answer 3

Используйте функцию для возврата продукта в функцию карты:

function renderProductsCardsList(products) {
    let rating = () => {
        let ratingVal = Math.floor(Math.random() * 5) + 1
        return (<>
            < Rating initialRating={ratingVal} readonly ></Rating >
            <div>{ratingVal}</div>
        </>)
    }
    return products.map(product => rating())
}