React. JS-处理空/未定义大小写，同时将JSON对象显示为键和值

Question

我有下面的代码，它执行嵌套JSON的所有键和值。它的工作正常，但是每当任何键的值为空时，代码就会在减少函数处中断。我也想显示空值。我试图在其他情况下处理空和未定义的场景，但这不起作用。下面是我写的代码。这一定是我错过的一个小变化。

  const myObj = {
      "key1": "value1",
      "key2": null,
      "key3": "value3",
      "key4": {
        "k1": "val1",
        "k2": {
          "p1": "v1",
          "p2": "v2",
          "p3": "v3"
        }
      }
    }


class Details extends React.component{
constructor(){
  this.getValues = this.getValues.bind(this);
}
getValues() {
     return (
        <div key={k} className="row">
            <div className="col-xs-6">{k}</div>
            <div className="col-xs-6">{v}</div>
        </div>
    )
    }

generateData(myObj) {

        const newData = Object.keys(myObj).reduce((result, currentKey) => {
          if (typeof myObj[currentKey] === 'string' || myObj[currentKey] instanceof String) {
            const elementToPush = getValues(currentKey, myObj[currentKey]);
            result.push(elementToPush);
          } else {
            const nested = generateData(myObj[currentKey]);
            result.push(...nested);
          }
          return result;
        }, []);
        return newData;
      }

render() {
    return (
        <div>
            <Header />
            <div className="content">
                {this.generateData(myObj)}
            </div>
        </div>
    )
}
}

Answer 1

这是你所期待的吗？

 const newData = Object.keys(myObj).reduce((result, currentKey) => {
          if (typeof myObj[currentKey] === 'string' || myObj[currentKey] instanceof String) {
            const elementToPush = getValues(currentKey, myObj[currentKey]);
            result.push(elementToPush);
          } else if(!myObj[currentKey]) {
            const nullElementToPush = getValues(currentKey, "null");
            result.push(nullElementToPush);
          } else {
            const nested = generateData(myObj[currentKey]);
            result.push(...nested);
          }
          return result;
}, []);