当父组件渲染子组件时,父组件使用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>
}
)
}
1条答案
按热度按时间atmip9wb1#
我喜欢先把状态对象当作null,这样你就可以检查是否有对象,或者它是否仍然是null;
Null用于明确地告诉某些东西不存在。空对象意味着你有一个对象,但没有任何属性,但仍然是一个对象,所以任何像
!!{}
这样的状态验证都是真实的,因为对象存在,但没有值。空值不存在,所以有!!null验证将始终返回一个falsey条件。