在react.js中处理未定义的props的最好方法是什么?

what's the best way to deal with undefined props in react.js?

本文关键字：方法 是什么 props js 处理 未定义 react      更新时间：2023-09-26

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

例子
store.dispatch(loadData());
在我的减速器中，我将状态初始化为一个对象。像这样 
 function myReducer(state = {}, action)

现在我有了一些智能组件，它订阅了我的状态，然后将它传递给另一个组件来显示数据。此场景的另一个重要注意事项是，数据的检索是异步进行的。我们也假设这个对象的键是某个数组。标记组件应该是这样的

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

因为key没有定义，如果我在它上面调用map，就会爆炸。我处理这个问题的方法是使用一个简单的if检查。如果定义了key，则运行.map，否则返回null。然后，当我的数据从服务器返回时，由于该组件订阅的状态发生了变化，将再次调用呈现。此时键已经定义，可以调用map。

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

const initialState = {
  key:[]
}
function myReducer(state = initialState, action)

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

我的问题是;这些方法中有哪一种比另一种更好吗?或者，是否有另一种方法可以完全解决这个问题?

一般来说，我喜欢采用的方法是在组件上定义具有"空"语义的默认道具。例如，在你所描述的问题的背景下，我通常会这样构建我的组件(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、空或未定义的输入状态创建良好定义的行为。

相关文章：