Javascript 什么'；在react.js中处理未定义道具的最佳方法是什么？

假设我有一个在页面加载时被调度的操作，比如说，在index.js文件中

范例

store.dispatch(loadData());

在我的减速器中，我将状态初始化为一个对象。像这样的

 function myReducer(state = {}, action)

{this.props.object.key.map(k => do something)}

现在我有一些智能组件订阅我的状态，然后将其传递给另一个组件以显示数据。此场景的另一个重要注意事项是数据的检索是异步进行的。 我们还假设这个对象的键是某个数组。 因此标记组件将具有如下内容

 function myReducer(state = {}, action)

{this.props.object.key.map(k => do something)}

既然键是未定义的，若我在上面调用map，我就爆炸了。我处理这个问题的方法是使用一个简单的if检查。如果定义了键，则运行

.map

，否则返回null。然后，当我的数据从服务器返回时，由于该组件订阅的状态发生更改，将再次调用渲染。在这一点上，键被定义，可以调用map

另一种方法是定义减速器中的状态。换句话说，如果我知道我的状态将是一个带有数组属性的对象，我可能会这样做

const initialState = {
  key:[]
}

function myReducer(state = initialState, action)

这样做将受益于这样一个事实，即现在我不再需要if检查，因为key从来都不是未定义的

---

我的问题是,；这些方法中有哪一种比另一种更好？或者，是否有另一种完全解决此问题的方法？

通常，我喜欢采用的方法是在组件上定义具有“空”语义的默认道具。例如，在您描述的问题的上下文中，我通常会这样构造我的组件（ES6类样式）：

---

这相对干净，防止代码在运行时抛出，并强制您为语义为null、空或未定义的输入状态创建定义良好的行为。

我使用第二种方法：使用空数组初始化。