reactjs React -当期望一个对象并传递给子对象时,使用什么作为设置状态的默认值,以避免在首先使用空值渲染时出错?

ogsagwnx  于 2023-06-22  发布在  React
关注(0)|答案(1)|浏览(90)

当父组件渲染子组件时,父组件使用setState并将结果传递给child,如果setstate函数传递的是对象,我会将默认值设置为空对象,否则会引起混淆,我会认为这是不好的做法。然而,我总是得到一个err,因为当child第一次呈现时还没有值,所以它只得到一个空对象,这不是一个falsy值。我唯一能做的就是在子组件中使用Object.keys().length来检查是否>1,然后才呈现传递的值。同样,这也是一种不好的做法,因为我不必要地迭代(也许是很多键),只是为了检查我是否得到了一个非空对象。
什么是最佳解决方案/良好做法?谢谢

const App = () => {
    const [value, setValue] = useState({}) //expecting an object
    useEffect(() => {
        api.get....
        setValue(response)
    })
    return <Child value={value}/>
}

const Child = ({value}) => {
    return (
        {
            value && <div>{value}</div> //that will always throw an error as first time Chuld is rendered it gets an empty object
            //this works:
            value.Object.keys().length > 0 && <div>{value}</div>
        }
    )
}
atmip9wb

atmip9wb1#

我喜欢先把状态对象当作null,这样你就可以检查是否有对象,或者它是否仍然是null;

const [value, setValue] = useState(null);

Null用于明确地告诉某些东西不存在。空对象意味着你有一个对象,但没有任何属性,但仍然是一个对象,所以任何像!!{}这样的状态验证都是真实的,因为对象存在,但没有值。空值不存在,所以有!!null验证将始终返回一个falsey条件。

相关问题