Reactjs 这个状态钩子有什么问题？

我在网上找到了这个组件，它创建了一个评论组件，但它不工作

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>
  );

---

怎么了？如何修复它呢？

我认为钩子很好，但是您需要在函数体周围使用

{}

：

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>
    );
};

export const Rating=props=>{
const[rating，setRating]=useState（（typeof props.rating==='number'）？props.rating:0）；
const[selection，setSelection]=useState（0）；
常数悬停=事件=>{
设val=0；
if（event&&event.target&&event.target.getAttribute（'star-id'））
val=event.target.getAttribute（'star-id'）；
选举（val）；
};
返回(
悬停（空）}
onClick={event=>setRating（event.target.getAttribute（'star-id'）| | rating）}
onMouseOver={hoverOver}
>
{Array.from（{length:5}，（v，i）=>(
=i+1:评级>=i+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>
    );
};

export const Rating=props=>{
const[rating，setRating]=useState（（typeof props.rating==='number'）？props.rating:0）；
const[selection，setSelection]=useState（0）；
常数悬停=事件=>{
设val=0；
if（event&&event.target&&event.target.getAttribute（'star-id'））
val=event.target.getAttribute（'star-id'）；
选举（val）；
};
返回(
悬停（空）}
onClick={event=>setRating（event.target.getAttribute（'star-id'）| | rating）}
onMouseOver={hoverOver}
>
{Array.from（{length:5}，（v，i）=>(
=i+1:评级>=i+1}
/>
))}
);
};


您应该考虑的第二件事是：您可能应该使用
==
而不是
=
进行
类型的检查。
错误是什么？引发了什么错误？错误是什么？引发了什么错误？