React-Semantic-UI Rating onRate（）undefined value

Question

我想在ReactJS中创建一个星级系统。为此，我使用了React-Semantic-UI Rating。但是，在第一次单击时，它将给出状态的初始值（为0），而在下次单击时，它将给出未定义的值。我很高兴有人在反应功能组件中对此进行了解释，但其他方法也可以接受:)

import React, { useState } from 'react';
import {
  Container,
  Rating
} from 'semantic-ui-react';

    function App() {
      const [rating, setRating] = useState(0);
    ​
      function handleChangeOnRate(e) {
        e.preventDefault();
        setRating(e.target.value);
      }
    ​
      return (
        <div className='App'>
          <Container>
            <Rating
              value={rating}
              onRate={(e) => {
                handleChangeOnRate(e);
                console.log(rating);
              }}
              maxRating={5}
              icon='star'
              size='huge'
            />
          </Container>
        </div>
      );
    }
    ​
    export default App;

Answer 1

似乎在onRate回调的第二个参数中，评级作为对象属性传递。因此，您应该能够执行此操作以获得评分。

<Rating
  value={rating}
  onRate={handleChangeOnRate}
  maxRating={5}
  icon='star'
  size='huge'
/>

然后像这样处理它。

function handleChangeOnRate(e, { rating }) {
  e.preventDefault();
  setRating(rating);
}

Answer 2

handleChangeOnRate= (e, { rating }) => {
    e.preventDefault();
    setRating(rating)
}

并将渲染函数中的值替换为等级：

       <Rating
          rating={rating}
          ...