web-dev-qa-db-ja.com

React-JSXを使用してrenderメソッドで辞書を反復する方法は？

私はReactを学習していて、コンポーネントのreturnメソッドで反復したいJSONオブジェクトを返すAjax呼び出しを行う小さなテストアプリを設定しました。私は試してみました私が考えることができるすべてのものとググったが、1時間後のように私はまだ困惑している。

これが私が持っているものです...

render() {
  const { vals } = this.state;
  return (
    <div>
      {/* note that this correctly outputs the value of vals[key]: {vals['key']} */}
      Object.keys({vals}).map((key, index) => ( 
        <p key={index}> this is my key {key} and this is my value {vals[{key}]} </p> 
      ))
    </div>
  )
}

ここで何が悪いのですか？ ES6/JSXの適切なリファレンスに関する推奨事項はありますか？私はこの情報を調べる良い方法がないので、単純なことに苦労してきました。

reactjsecmascript-6react-jsx
7
user797963

_{vals}_は、オブジェクトからvalsプロパティを抽出します。したがって、valsはすでにオブジェクトであるため、Object.keys({vals})は正しくありません。同様に、_{vals[key]}_ではなく_{vals[{key}]}_にする必要があります。

_render(){
  const {vals} = this.state;  // Essentially does: const vals = this.state.vals;
  return (
    <div>
      {
        Object.keys(vals).map((key, index) => ( 
          <p key={index}> this is my key {key} and this is my value {vals[key]}</p> 
        ))
      }
    </div>
  )
}
_

valsが_{ a: 1, b: 2}_を含むオブジェクトである場合、Object.keys(vals)は_['a', 'b']_を取得し、マップの最初の反復ではkeyは_'a'_および値にアクセスするには、本質的に_vals[key]_である_vals['a'] => 1_を実行します。

Objectの構造化構文に混乱していると思います。これは、ES5 JavaScriptの単なる構文上の糖です（ほとんどのES6は単なる糖です）。それをよりよく理解するために MDNのDestructuring割り当てに関するドキュメント を読んでください。

14
Yangshun Tay