javascript - 我应该用 try{} catch(err){} 包装所有 React 渲染代码吗？

Question

有时 React 在运行 render 代码时会静静地失败。然后很难找出它在哪里坏了。

我想知道，我是否应该将 render 函数的所有代码放在 try {} catch(err) {alert(err)} 中？

这是一个好的做法还是我应该以不同的方式捕获和调试错误？

其中一个没有显示错误的情况是，当我将一些 props 变量发送到实际上未定义的组件时，它会尝试获取该 undefined variable 的属性，如下所示:

<FormField form={this.props.form} />

然后，在 FormField 组件 render 函数中有这段代码:

var value = this.props.form[this.props.id]

现在，如果 form prop 未定义，FormField 组件中的代码不会显示任何错误，但是当我使用 try/catch 时，它会显示:

也许我应该使用 try/catch 来调试错误，然后修复并添加检查，然后删除 try/catch 以用于生产？

Answer 1

听起来您可以从 prop validation 中受益.然后您可以决定 Prop 的类型。

React.createClass({
  propTypes: {
    form: React.PropTypes.object,
    id: React.PropTypes.string
  }
  // ...
})

然后，如果您没有提供正确类型的属性，它将记录一个错误。

或者，您可以提供 default value如果那更合适的话。

React.createClass({
  getDefaultProps: function() {
    return {
      form: defaultFormProp
    };
  }
});

然后，如果您在渲染组件时不提供 prop，则将使用默认值。