settimeout 是返回 object 的所有值，为什么不只返回一个值？

Question

const RequestStatus = () => {
    const status = 'SUCCESS'
    
    const object = {
        SUCCESS: console.log('Success'),
        PROGRESS: console.log('Progress'),
        ERROR: console.log('Errror'),
    }
   
    useEffect(() => {
        setTimeout(() => {
            return object[status]
        }, 5000)
    }, [status])
}

Answer 1

You see all three statuses logged because you are calling all console.log when you create your object

Here are two ways you can modify your code to fix this

In the first method (which is the one I recommend) I am mapping the messages to the status codes and getting the approprite message using object[status]

const RequestStatus = () => {
    const status = 'SUCCESS'
    
    const object = {
        SUCCESS: 'Success',
        PROGRESS: 'Progress',
        ERROR: 'Errror',
    }
   
    useEffect(() => {
        setTimeout(() => {
            console.log(object[status]);
        }, 5000)
    }, [status])
}

In the second one I create lambda functions for each status code that define what happens when that status code occurs

const RequestStatus = () => {
    const status = 'SUCCESS'
    
    const object = {
        SUCCESS: ()=>{console.log('Success')},
        PROGRESS: ()=>{console.log('Progress')},
        ERROR: ()=>{console.log('Errror')},
    }
   
    useEffect(() => {
        setTimeout(() => {
            object[status]();
        }, 5000)
    }, [status])
}