javascript - 如何处理react.js中缺失的字段

Question

假设有一个用react.js编写的应用程序。它通过 Rest api 获取单个 json 并将一些属性传递给子组件。

处理 json 和其他东西可能丢失的属性的正确方法是什么？我可能应该检查每个组件是否存在 props，并用正确的结构填充状态，但填充空数据，如下所示:

var SomeComponent = React.createClass({
getInitialState: function() {
  return {
    someNestedStructure: {
      foo: {
        bar: null,
        baz: null
      },
      morenested: {
        something: '',
        andEvenMoreNested: {
            somethingb: ''
        }
      },
      somedata: {
        id: null
      },
      somedataaa: {
      }
    }
  }
},
componentDidMount: function() {
  //call rest api and set new state depending on what is inside json
  //check every required field to pass to children compoents
},
render: function() {
  return (
    <div>
        <ComponentUsingNEsteStructure data={this.state.someNestedStructure.moreNested}/>
        <ComponentThatNeedsEverythign data={this.state.someNestedStructure} />
        <SomeOtherComponent some={this.sate.somedataaa} />
    </div>
  );
}
});

但我猜它会在代码中生成很多与 json 相关的结构和很多 if。

感谢您的帮助!

Answer 1

这不是 React 特有的。你想要的是深度延伸。这可以在 npm 上以 deep-extend 的形式获得。

用法是这样的:

var defaultsForThing = {
  foo: '',
  bar: {
    baz: true,
    quux: null
  }
};

// make a defaulting function
var defaultThing = deepExtend.bind(null, defaultsForThing);

// fetch some data which might be missing fields
$.getJSON('/api', function(data){
  var fixed = defaultThing(data);
  doSomethingWith(fixed);
});

这是 deepExtend 函数(但更喜欢 linked to module )

var deepExtend = module.exports = function (/*obj_1, [obj_2], [obj_N]*/) {
    if (arguments.length < 1 || typeof arguments[0] !== 'object') {
        return false;
    }

    if (arguments.length < 2) return arguments[0];

    var target = arguments[0];

    // convert arguments to array and cut off target object
    var args = Array.prototype.slice.call(arguments, 1);

    var key, val, src, clone, tmpBuf;

    args.forEach(function (obj) {
        if (typeof obj !== 'object') return;

        for (key in obj) {
            if ( ! (key in obj)) continue;

            src = target[key];
            val = obj[key];

            if (val === target) continue;

            if (typeof val !== 'object' || val === null) {
                target[key] = val;
                continue;
            } else if (val instanceof Buffer) {
                tmpBuf = new Buffer(val.length);
                val.copy(tmpBuf);
                target[key] = tmpBuf;
                continue;
            } else if (val instanceof Date) {
                target[key] = new Date(val.getTime());
                continue;
            } else if (val instanceof RegExp) {
                target[key] = new RegExp(val);
                continue;
            }

            if (typeof src !== 'object' || src === null) {
                clone = (Array.isArray(val)) ? [] : {};
                target[key] = deepExtend(clone, val);
                continue;
            }

            if (Array.isArray(val)) {
                clone = (Array.isArray(src)) ? src : [];
            } else {
                clone = (!Array.isArray(src)) ? src : {};
            }

            target[key] = deepExtend(clone, val);
        }
    });

    return target;
}

我可能会在该函数中更改的一件事是它不能很好地满足这种情况:

var defaults = {
  a: [{b: 0, c: 0}]
};

var obj = {
  a: [{b: 1}, {b: 2}, {c: 3}]
};

deepExtend(defaults, obj);

为了修复 json 响应，您希望最终得到以下结果，但这在技术上并不是深度默认值(它是架构强制)。

{
  a: [{b: 1, c: 0}, {b: 2, c: 0}, {c: 3, b: 0}]
}