Reactjs 如何处理react.js中的初始空值

我有一个观点。它的示例代码是

const [a, seta] = useState(null)
useEffect(() => {
        if(!a){

            geta(match.params.id);
        }
    })
return (
a.props
);

但它给出的错误是无法读取空值属性

为什么会出现错误？ 在useEffect分配

a

值之前，您的代码返回

a.props

。实际上，您返回的props为null，因此会出现错误

“默认情况下，效果在每次完成渲染后运行”——

如何修复 您可以有条件地返回数据：

return（a&&a.props？a.props:null）

例如，在上下文中，类似这样的内容应该可以工作：

const[a，seta]=useState（null）
useffect（（）=>{
如果（！a）{
seta（{问候语：'你好，世界'}）；
}
})
返回(
a&&a.问候语？a.问候语：空
)
}
以下代码返回错误，因为在
useffect
启动并更新
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;


工作代码沙盒：
a？.props
即。
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;