AntD Rate DefaultValue 没有得到值

Question

defaultValue Rate 的默认值 function 不起作用。 或者我做错了什么。

这是我的主页：

const BookPage = () => {
    ...
    const [state, setState] = useState({});

    useEffect(() => {
        fetch()
    }, [])

    async function fetch() {
        ...
        const rate = await UserBookService.fetchRate(bookId);

        await setState({..., rate: rate});
    }

我的回报 function：

    console.log(state.rate)
    return (
        <>
            <div style={{width: "fit-content", display: "inline-block", marginLeft: "200px"}}>
            ...

                <div style={{display: "inline-block", float: "right", marginLeft: "50px", marginTop: "70px"}}>
                    ...
                    <hr/>
                    <Rate defaultValue={state.rate} onChange={(value) => onChange(value)}></Rate>
                </div>
            </div>
        </>
    )

console.log(state.rate)的结果：

undefined
undefined
5
5

所以，这可能是因为未定义的行，但我不知道如何解决它。

Answer 1

有2个问题：

1、打印时有重复值。 解决方法是删除或评论

<React.StrictMode></React.StrictMode>

index.js 文件中的标记

2、useEffect只在组件已经渲染时执行，在组件渲染时undefined，所以默认为空 object {}.rate = undefined

使用前请检查其值

Answer 2

这是我找到的解决方案，我必须将 RateSection 从 function 组件更改为 class 组件。 因此，我可以在 render 方法上使用 if-else 语句。

import {Rate} from "antd";
import UserBookService from "../../service/user/UserBookService";
import React from "react";

class RateSection extends React.Component {
    state = {
        rate: undefined
    }

    constructor(props) {
        super(props);
        this.getCurrentRate().then(value => this.setState({rate: value}));
    }

    getCurrentRate = async () => {
        return await UserBookService.fetchRate(this.props.bookid);
    }

    onChange = async (value) => {
        await UserBookService.addRate(this.props.bookid, value);
    }

    render() {
        if (this.state.rate !== undefined) {
            return (
                <Rate defaultValue={this.state.rate} onChange={(value) => this.onChange(value)}></Rate>
            )
        }
    }
}

export default RateSection;