Question

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

例如

store.dispatch(loadData());

在我的reducer中，我将状态初始化为一个对象。像这样的东西

 function myReducer(state = {}, action)

现在我有一些智能组件订阅我的状态，然后将其传递给另一个组件以显示数据。这种情况的另一个重要注意事项是数据的检索是异步发生的。我们还假设该对象的键是某个数组。所以标记组件会有这样的东西

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

既然密钥未定义，如果我在上面调用map，我会爆炸。我一直在处理的方式是使用简单的if检查。如果定义了key，则运行.map否则返回null。然后，当我的数据从服务器返回时，由于该组件订阅的状态发生变化，将再次调用渲染。此时，键被定义并且可以调用map。

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

const initialState = {
  key:[]
}

function myReducer(state = initialState, action)

这样做会有好处，因为现在我不需要我的if检查，因为密钥永远不会被定义。

我的问题是;这些方法中的任何一种都比另一种更好吗？或许，还有另一种方法可以解决这个问题吗？

Answer 1

通常，我喜欢的方法是在组件上定义具有“空”的语义含义的默认道具。例如，在您描述的问题的上下文中，我通常会像这样构建我的组件（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，空或未定义的输入状态创建明确定义的行为。

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

1 个答案: