假设我有一个在页面加载时分派的操作,例如在 index.js 文件中。
例子
store.dispatch(loadData());
在我的减速器中,我将状态初始化为一个对象。像这样的东西
function myReducer(state = {}, action)
现在我有一些智能组件订阅我的状态,然后将其传递给另一个组件以显示数据。此场景的另一个重要注意事项是数据的检索是异步发生的。我们还假设这个对象的键是某个数组。所以标记组件会有这样的东西
{this.props.object.key.map(k => do something)}
现在由于 key 未定义,如果我在它上面调用 map,我会爆炸。我一直在处理这个问题的方法是使用一个简单的 if 检查。如果定义了键,则运行.map
否则返回 null。然后当我的数据从服务器返回时,由于该组件订阅的状态发生变化,将再次调用渲染。至此,key已经定义好,map就可以调用了。
另一种方法是定义您的状态在减速器中的样子。换句话说,如果我知道我的状态将是一个带有数组属性的对象,我可能会做这样的事情。
const initialState = {
key:[]
}
function myReducer(state = initialState, action)
这样做将受益于这样一个事实,即现在我不需要 if 检查,因为 key 永远不会未定义。
我的问题是;这些方法中的任何一种都比其他方法更好吗?或者,是否有另一种方法可以完全解决这个问题?