javascript - 如何访问未初始化的状态 Hook 的属性？

Question

如果状态尚未设置，如何安全地使用组件中的对象？ 我将其初始化为 null(我可以使用 {}，但这会导致其他影响)。我得到:

Cannot read property 'name' of undefined

const [user, setUser] = useState(null);
someService(user => setUser(user))
const someRef = useRef(null);

if (!user) {
    // to avoid the undefined user.name I tried this but it causes an issue with useRef (because the actual someRef is not rendered when !user
    return <p>loading user</p>
}

return (
    <div>
        <p>{user.name}</p>
        <div ref={someRef}>hello</div>
    </div>
)

工作示例:https://codesandbox.io/s/young-dust-y2z5k?fontsize=14&hidenavigation=1&theme=dark

此时，用户尚未创建，我们应该渲染“正在加载用户”，这很好，但 someRef 会导致问题，因为有消息，但组件未渲染。取消注释第 5 行和注释第 6 行以查看其工作情况

Answer 1

尝试:

const [user, setUser] = useState(null);
someService(user => setUser(user))

render(){
    return({user? <p>{user.name}</p> :<p>loading user</p>});
}

您可以在引用和用户更改上使用useEffect来设置另一个变量:

import React, { useState, useEffect } from 'react'

export default function Test() {
    const [user, setUser] = useState(null);
    const someRef = useRef(null);
    const [loaded, setLoaded] = useState(false);

    useEffect(() => {
        if (user && someRef) {
            setLoaded(true)
        }
    }, [user, someRef])

    return (
        loaded ?
            <div>
                <p>{user.name}</p>
                <div ref={someRef}>hello</div>
            </div> : <div>not loaded yet</div>
    )
}