从(看似)相同的JSON

时间:2016-09-01 22:03:23

标签: javascript ecmascript-6 redux redux-form

我将尝试以框架无关的方式构建此框架,但我的用例特定于react / redux / redux-form

我首先从商店中获得thing。这很重要,因为如果我定义这个对象,事情就可以了。但是,这使得重新创建错误变得非常困难。所以,我将通过几个例子。第一个工作,其余工作没有。假设它具有以下结构:

thing = {
  foo: 'foo',
  bar: ['bar'],
  baz: 'baz'
}

这很好用

function mapStateToProps(state) {
  const { thing } = state.thing;
  // thing = {
  //   foo: 'foo',
  //   bar: ['bar'],
  //   baz: 'baz'
  // }

  // I don't care about `baz`, and I don't want to send it downstream
  // If I hardcode this, everything works fine
  // (except that my data is dynamic, so 
  // this is not a real solution)
  const workingObj = { foo: 'foo', bar: ['bar'] }

  return (
    { initialValues: workingObj }
  );
}

这不起作用,但是

function mapStateToProps(state) {
  const { thing } = state.thing;
  const brokenObj = { foo: thing.foo, bar: thing.bar };
  return (
    { initialValues: brokenObj }
  );
}

我认为我在引用丢失范围或其他方面遇到了一些问题。我们来试试深刻的副本:

function mapStateToProps(state) {
  const { thing } = state.thing;
  const brokenObj = JSON.parse(JSON.stringify(
    { foo: thing.foo, bar: thing.bar }
  );

  return (
    { initialValues: brokenObj }
  );
}

以下是更详细的相同内容......我不知道workObjStr和brokenObjStr如何被解析成除了相同对象之外的任何东西。

function mapStateToProps(state) {
  const { thing } = state.thing;
  const workingObj = { foo: 'foo', bar: ['bar'] };
  const brokenObj = { foo: thing.foo, bar: thing.bar };

  const workingObjStr = JSON.stringify(workingObj);
  const brokenObjStr = JSON.stringify(brokenObj);
  console.debug(workingObjStr === brokenObjStr);
  // => true

  return (
    { initialValues: JSON.parse(brokenObjStr) }
  );
}

所以,我的问题一般来说是:两个相同的字符串对象在解析后如何产生不同的对象?可能会在幕后进行一些优化伏都教,或者我错过了一些基本的东西?我无法想象这次回归的下游甚至会知道知道这些物品是通过不同方式生成的,所以我完全被难倒了。

我还会再次注意到我无法想到你如何重现这个...它似乎与redux环境有某种联系,因为如果我在里面定义thing对象功能范围的事情很好。

我还会说我知道 initialValues对象格式正确并向下游传播,因为我可以在我的表单中看到它......但是redux-form除非在mapStateToProps函数范围内手动创建,否则不会提取它。再一次,我不知道它怎么能分辨出差异,但希望我只是错过了一些愚蠢的东西......

谢谢,

托马斯

0 个答案:

没有答案