react.js 如何处理初始空值
2021-03-21
1218
我有一个视图。其示例代码为
const [a, seta] = useState(null)
useEffect(() => {
if(!a){
geta(match.params.id);
}
})
return (
a.props
);
但它给出错误无法读取空值的属性
2个回答
为什么会出现错误？
在 useEffect 为
a
赋值之前，您的代码返回了
a.props
。实际上，您返回的是 null 的 props，因此会出现错误。
"By default, effects run after every completed render" - React docs
如何修复
您可以有条件地返回数据：
return(a && a.props ? a.props : null)
举个上下文中的例子，类似这样的代码应该可以工作：
const [a, seta] = useState(null)
useEffect(() => {
if(!a){
seta({greeting: 'Hello World'});
}
})
return (
a && a.greeting ? a.greeting : null
)
}
Ben
2021-03-21
以下代码返回错误，因为在
useEffect
启动并更新
a
的值之前，第一次渲染时
a
为空。
import React, { useState, useEffect } from 'react';
const App = () => {
const [a, seta] = useState(null)
useEffect(() => {
/* ... do what you need to do */
}, [])
return (
<div className="App">
<h1>Your state:</h1>
<h2>{a.props}</h2>
</div>
);
}
export default App;
相反，在返回函数中添加类型保护，以防止在
useEffect
触发之前出现
null
值：
import React, { useState, useEffect } from "react";
const App = () => {
const [a, seta] = useState(null);
useEffect(() => {
/* ... do what you need to do */
setTimeout(() => seta({ props: 'test'}), 3000);
}, []);
return (
<div className="App">
<h1>Your state:</h1>
{/* <h2>{a.props}</h2> // an erroneous return value */}
<h2>{a !== null && a.props !== null ? a.props : "Loading ..."}</h2>
</div>
);
};
export default App;
工作 CodeSandbox： https://codesandbox.io/s/stack-66736637-nullinreturn-6or9f
Harley Lang
2021-03-21