React函数式组件useEffect数据更新但组件不更新

若使用普通变量，控制台会提示使用useRef()获得响应式，但是使用useRef()数据可以更新，但是页面不会更新

应使用useState()和useEffect()配合实现数据更新组件更新

useState()的变量可以响应且可配合更新组件

import {LoadingOutlined, SmileOutlined, HolderOutlined, UploadOutlined, NodeIndexOutlined} from '@ant-design/icons';
import { Steps } from 'antd';
import React, {useEffect, useRef, useState} from 'react';
import PubSub from "pubsub-js";

const { Step } = Steps;

const StepInfo = () => {

    const [uploadStatus, setUploadStatus] = useState("wait");
    const [sampleStatus, setSampleStatus] = useState("wait");
    const [generateStatus, setGenerateStatus] = useState("wait");
    const [doneStatus, setDoneStatus] = useState("wait");


    useEffect(() => {
        const token = PubSub.subscribe("update-step", (_, data) => {
            // console.log("StepInfo收到消息了", data);
            const {type, status} = data;
            if (type === "upload") {
                console.log(status)
                setUploadStatus(status)
            }
            else if (type === "sample") {
                setSampleStatus(status);
            }
            else if (type === "generate") {
                setGenerateStatus(status);
            }
            else if (type === "done") {
                setDoneStatus(status);
            }
        });
        // 返回的函数在组件卸载时执行   =>   componentWillUnmount
        return () => {
            PubSub.unsubscribe(token);
        }
    });

    return (
        <div style={{height: "60px", padding: "0 20px", marginTop: "10px"}}>
            <Steps>
                <Step status={uploadStatus} title="Upload Image" icon={uploadStatus === "process" ? <LoadingOutlined/> : <UploadOutlined />} />
                <Step status={sampleStatus} title="Image Sampling" icon={<HolderOutlined />} />
                <Step status={generateStatus} title="Generate Path" icon={<NodeIndexOutlined />} />
                <Step status={doneStatus} title="Done" icon={<SmileOutlined />} />
            </Steps>
        </div>
    )
};
export default StepInfo;