Оператор карты React
Я пытаюсь объявить переменную «ratingVal», которой присваивается случайное значение «нет» внутри оператора карты. Я хочу использовать переменную в компоненте рейтинга, а также отображать ее на экране. Однако я получаю сообщение об ошибке
Parsing error: Unexpected token
Каков правильный синтаксис для объявления переменной в этом случае?
renderProductsCardsList(products){
return products.map(
(product, i) =>
let ratingVal = Math.floor(Math.random() * 5) + 1
<Rating initialRating = {ratingVal} readonly></Rating>
<div>{ratingVal}</div>
)
}
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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())
}
У вас не может быть оператора объявления внутри стрелочной функции с неявным возвратом. Для этого используйте явный синтаксис возврата. Кроме того, вы не можете вернуть несколько элементов из метода карты. Оберните их внутри <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>
)
}
У вас может есть выражение присваивания в стрелочной функции с неявным возвратом. У вас не могу есть оператор декларация.
Верхний фрагмент кода выглядит так, как я хочу, но все равно выдает -> Ошибка синтаксического анализа: неожиданный токен
к оператору «let ratingVal = Math.floor(Math.random() * 5) + 1». И если я удалю эту строку, она жалуется на возврат (строка
Две проблемы:
- Отсутствующие скобки после стрелки
=>: вы можете опустить скобки только в том случае, если вы делаете неявный возврат в одной строке. Плавающий 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> }) }
После
</React.Fragment>не хватает закрывающей скобки