javascript - react : "Prop or nothing" in component property

Question

在Firefly example project PostForm 组件中有此 defaultValue 行:

<Input
  type="text"
  name="title"
  defaultValue={this.props.post.title || ''}
  required
/>

当父组件未传递任何 prop 时，我在渲染此组件时遇到错误

TypeError: Cannot read property 'title' of undefined

当另一个组件传递 post 属性时就没问题了。为什么

|| ''

在没有 Prop 传递的情况下不起作用吗？

Answer 1

那是因为 post 是 undefined 如果您不将它作为 prop 传递，这将在您执行 this.props 时引起错误。 post.title.

您需要检查 post 是否也存在于 props 中:

<Input
  type="text"
  name="title"
  defaultValue={this.props.post && this.props.post.title || ''}
  required
/>