假设我有一个在页面加载时调度的操作,例如在index.js 文件中。
示例
store.dispatch(loadData());
在我的减速器中,我将状态初始化为一个对象。像这样的东西
function myReducer(state = {}, action)
现在我有一些智能组件可以订阅我的状态,然后将其传递给另一个组件以显示数据。此场景的另一个重要注意事项是数据的检索是异步发生的。 我们还假设该对象的键是某个数组。 所以标记组件会有这样的东西
{this.props.object.key.map(k => do something)}
现在由于 key 未定义,如果我在其上调用 map ,我就会爆炸。我处理这个问题的方法是使用简单的 if 检查。如果定义了 key 则运行
.map
否则返回 null。然后,当我的数据从服务器返回时,由于该组件订阅的状态发生变化,渲染将被再次调用。至此key就定义好了,可以调用map了。
另一种方法是定义你的状态在减速器中的样子。换句话说,如果我知道我的状态将是一个带有数组属性的对象,我可能会做这样的事情。
const initialState = {
key:[]
}
function myReducer(state = initialState, action)
这样做会有好处,因为现在我不需要 if 检查,因为 key 永远不会未定义。
我的问题是;这些方法中的任何一种比另一种更好吗?或者也许有另一种方法可以完全解决这个问题?
一般来说,我喜欢采用的方法是在组件上定义默认 props,其语义为“空”。例如,在您描述的问题的上下文中,我通常会像这样构建我的组件(ES6 类样式):
class MyComponent extends React.Component {
static defaultProps = {
object: {
key: []
}
};
...
method() {
// this.props.object.key is an empty array, but is overriden
// with a value later after completion of the reducer
// (trigerred asynchronously)
this.props.object.key.map(doSomething);
}
}
这相对干净,可以防止代码在运行时抛出异常,并强制您为语义上的 null、空或未定义的输入状态创建定义良好的行为。
使用安全的访问器来获取道具。例如。 foo?.bar?.baz;
您也可以使用盖子灰来优雅地失败。
作为故障安全措施,您应该在组件嵌套结构中使用更高的错误边界。