反应未捕获的类型错误：无法读取未定义的属性 x

Question

我有一个组件，它通过像这样的反应路由器链接组件从父组件获取数据作为道具：

<Link to={{pathname: "/cv", state:cvData }}>Next</Link>

“/cv”路径中的 CV 组件获得该状态。但是在 CV 组件的 JSX 中，我无法访问该状态下的数据。代码是这样的：

const [cvData, setCvData] = useState(props.state)
useEffect(() => {
    setCvData(props.cvData)
    console.log(cvData)
}, [])

console.log 的输出首先是未定义，然后是数据。但即使它记录了正确的数据，JSX 部分也会抛出“无法读取未定义的属性 x”的错误。

Answer 1

那是因为在开始的某个时刻你的数据首先是未定义的，你可以在使用它之前添加一个简单的检查条件，例如：

return(
  <div>
    { cvData && cvData.x ? <div>display your cvData</div> : null }
  </div>
)

Answer 2

<块引用>

默认情况下，useEffect() 在第一次渲染之后和每次 DOM 更新之后运行。设置状态会触发 React 重新渲染，但在重新渲染之前，它会更新 DOM 并记住状态变量值，并在重新渲染后使用它。

在第一次渲染期间，您的 props.state 未定义。

在第一次渲染之后，useEffect() 将运行，它会设置状态并记住它。您在效果中有 console.log，它将打印一个未定义的状态。

现在，React 将更新 DOM，当您尝试访问未定义状态时，它会抛出错误“无法读取未定义的属性 x”。

在我看来，我们不应该在 useEffect 中使用 setState。