类型错误：无法读取反应中未定义的属性“减少”

我有一个表单，要求用户输入几个字段的字段值，将字段值存储在状态中并以自定义格式显示状态值。

所以，我有几个输入字段和一个提交按钮：

<button onClick={this.handleSubmit}>Submit</button>
         {
           this.state.credentials &&
           //<Credentials value={this.state}/>
            <Credentials value={JSON.stringify(this.state, undefined, 2)} />
         }

Credentials 函数将组件的状态转换为 JSON 格式：

const Credentials = ({value} ) => {
    return <pre>{formatState(value)}</pre>;
}

formatState 函数基本上将操纵状态值并以我想要的方式显示它们：

function formatState(state) {
  console.log("hi")
  console.log(state);
    const output = state.groups.reduce((final, s)=> {
      console.log(output)
      const values = Object.keys(s).reduce((out, o)=> {
        out[o] = s[o].map(k => Object.values(k))
        return out;
        }, {})
        final =  {...final, ...values}
        return final;
      }, {})
      console.log(output) 
  }

状态看起来像这样：

{
  "groups": [
    {
      "typeA": [
        {
          "name": "abc"
        },
        {
          "number": "13,14"
        }
      ],
      "typeB": [
        {
          "country": "xyz"
        },
        {
          "date1": "2019-05-14"
        }
      ]
    }
  ]
}

但我想要这样的输出：

groups: {
"typeA": [[abc],[13,14]],
"typeB": [[2019-05-14],[xyz]]
}

SO，reduce函数用于将状态转换为以下输出。但我收到错误： “类型错误：无法读取未定义的属性‘reduce’”

请任何人告诉我为什么会发生这种情况。

错误在这里<Credentials value={JSON.stringify(this.state, undefined, 2)} />. JSON.stringify https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify提供某个对象的字符串表示（this.state在你的情况下）。争论state of formatState有字符串类型。看来你想拥有state论证要客观。所以你应该这样做

<Credentials value={this.state} />