Что плохого в этой реакции useState?

Question

Я нашел этот компонент в сети, который создает компонент проверки, но он не работает.

import { useState } from 'react';

const Star = ({filled, starId}) => (
  <span star-id={starId} style={{ color: '#ff9933' }} role="button">
  {filled ? '\u2605' : '\u2606'}
</span>
);

export const Rating = props => (
  const [rating, setRating] = useState(typeof props.rating == 'number' ? props.rating : 0);
  const [selection, setSelection] = useState(0);
  const hoverOver = event => {
    let val = 0;
    if (event && event.target && event.target.getAttribute('star-id'))
      val = event.target.getAttribute('star-id');
    setSelection(val);
  };
  return (
    <div
      onMouseOut={() => hoverOver(null)}
      onClick={event => setRating(event.target.getAttribute('star-id') || rating)}
      onMouseOver={hoverOver}
    >
      {Array.from({ length: 5 }, (v, i) => (
        <Star
          starId={i + 1}
          key={`star_${i + 1} `}
          filled={selection ? selection >= i + 1 : rating >= i + 1}
        />
      ))}
    </div>
  );

В этой строке выдается ошибка:

 const [rating, setRating] = useState(typeof props.rating == 'number' ? props.rating : 0);

Что с ним не так? И как это можно исправить?

Answer 1

Я думаю, что крючок в порядке, но вам нужно использовать {} вокруг тела функции:

export const Rating = props => {
    const [rating, setRating] = useState((typeof props.rating === 'number') ? props.rating : 0);
    const [selection, setSelection] = useState(0);
    const hoverOver = event => {
        let val = 0;
        if (event && event.target && event.target.getAttribute('star-id'))
            val = event.target.getAttribute('star-id');
        setSelection(val);
    };
    return (
        <div
        onMouseOut={() => hoverOver(null)}
        onClick={event => setRating(event.target.getAttribute('star-id') || rating)}
        onMouseOver={hoverOver}
        >
            {Array.from({ length: 5 }, (v, i) => (
            <Star
            starId={i + 1}
            key={`star_${i + 1} `}
            filled={selection ? selection >= i + 1 : rating >= i + 1}
            />
            ))}
        </div>
    );
};

codesandbox

Второе, что вы должны Обратите внимание: вы, вероятно, должны использовать === вместо == для проверки typeof.