在react.js中处理未定义的道具的最佳方法是什么? [英] what's the best way to deal with undefined props in react.js?

问题描述

假设我有一个动作是在页面加载时分派的，例如在index.js文件中.

Let's assume I have an action that gets dispatched on page load, like say, in the index.js file.

示例

store.dispatch(loadData());

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

in my reducer I initialize state to to an object. Something like this

 function myReducer(state = {}, action)

现在，我有一些智能组件可以订阅我的状态，然后将其传递给另一个组件以显示数据.这种情况的另一个重要说明是，数据的检索是异步发生的事实.我们还假设该对象的键是某个数组.因此标记组件将具有类似的内容

now I have some smart component that subscribes to my state and then passes it down to another component to display the data. Another important note for this scenario is the fact that the retrieval of the data is happening asynchronously. Let's also assume that the key of this object is some array. So the markup component would have something like this

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

现在由于键是未定义的，如果我在其上调用map，我会炸毁.我一直在处理这个问题的方法是使用简单的if检查.如果定义了密钥，则运行 .map ，否则返回null.然后，当我的数据从服务器取回时，由于此组件预订的状态发生了变化，渲染将再次被调用.此时，已定义键并可以调用map.

Now since key is undefined, if I call map on it, I blow up. The way I have been dealing with this, is by using a simple if check. If key is defined then run .map otherwise return null. Then by the time my data gets back from the server, the render will be called again due to a change in state that this component subscribed to. At this point the key is defined and map can be called.

另一种方法是定义您在简化器中的状态.换句话说，如果我知道我的状态将是带有数组属性的对象，那么我可能会做类似的事情.

Another approach, Is to define what your state will look like in the reducer. In other words, if I know that my state will be an object with an array property on it, I might do something like this.

const initialState = {
  key:[]
}

function myReducer(state = initialState, action)

这样做的好处是，由于密钥永远不会被定义，所以现在我不需要if检查了.

Doing this will benefit in the fact that now I won't need my if check since key is never undefined.

我的问题是；这些方法中的任何一种都比其他方法更好吗?也许，还有另一种方法可以完全解决这个问题吗?

My questions is; are any of these approaches better than the other? Or perhaps, is there another way entirely to deal with this?

推荐答案

通常，我喜欢采用的方法是在组件上定义语义为空"的默认道具.例如，针对您描述的问题，我通常会这样构造我的组件(ES6类样式):

Generally, the approach I like to take is to define default props on the component which have the semantic meaning of "empty." For example, in context of the issue you describe I would typically structure my component like this (ES6 classes style):

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，空或未定义的输入状态创建明确定义的行为.

This is relatively clean, prevents the code from throwing at run time, and forces you to create well-defined behaviors for semantically null, empty, or undefined input states.

这篇关于在react.js中处理未定义的道具的最佳方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！