web-dev-qa-db-ja.com

TypeError：反応で未定義のプロパティ 'reduce'を読み取ることができません

いくつかのフィールドのフィールド値を入力し、フィールド値を状態に格納し、カスタマイズした形式で状態値を表示するようにユーザーに要求するフォームがあります。

だから、私はいくつかの入力フィールドと送信ボタンを持っています：

<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関数は、状態を次の出力に変換するために使用されます。しかし、「TypeError：未定義のプロパティ 'reduce'を読み取れません」というエラーが表示されます

これが起こっている理由を誰かに教えてください。

jsonreactjsstatereduce
2
user8306074

エラーはこちらです<Credentials value={JSON.stringify(this.state, undefined, 2)} />。 JSON.stringify は、いくつかのオブジェクト（this.state（お客様の場合）。引数state of formatStateのタイプは文字列です。 state引数をオブジェクトにする必要があるようです。だからあなたはやるべきです

<Credentials value={this.state} />
1
Fyodor