web-dev-qa-db-ja.com

オブジェクトを介したReactJSマップ

このような応答があります：

enter image description here

このHTML内の各オブジェクトの名前を表示したい：

{subjects.map((item, i) => (
  <li className="travelcompany-input" key={i}>
    <span className="input-label">{ item.name }</span>
  </li>
))}

ただし、subjects.map is not a functionのエラーがスローされます。

最初に、キーの配列を作成するオブジェクトのキーを定義する必要があります。ここで、ループしてsubject.namesを表示します。

私も試したのはこれです：

{Object.keys(subjects).map((item, i) => (
  <li className="travelcompany-input" key={i}>
    <span className="input-label">key: {i} Name: {subjects[i]}</span>
  </li>
))}
javascriptreactjsjsx
16
Sireini

_Object.keys_を呼び出すと、オブジェクトのキーの配列を返します。

Object.keys({ test: '', test2: ''}) // ['test', 'test2']

_Array.map_を呼び出すと、関数は2つの引数を取ります。 1.アイテム、2。インデックス。

データを取得する場合は、itemの代わりにiを使用する必要があります

_{Object.keys(subjects).map((keyName, i) => (
    <li className="travelcompany-input" key={i}>
        <span className="input-label">key: {i} Name: {subjects[keyName]}</span>
    </li>
))}
_
47
TryingToImprove

変数subjectsがObjectではなくArrayであるため、このエラーが発生します。map()は配列にのみ使用できます。

オブジェクトをマッピングする場合、これを行うことができます：

{ 
    Object.keys(subjects).map((item, i) => (
        <li className="travelcompany-input" key={i}>
            <span className="input-label">{ subjects[item].name }</span>
        </li>
    ))
}
5
Gayane

Object.keys（）を使用してオブジェクトのキーをマッピングします。

{Object.keys(yourObject).map(function(key) { return <div>Key: {key}, Value: {yourObject[key]}</div>; })}

4
Rami Salim

オブジェクトキーを介してマップしようとするとエラーが発生しますか、それとも何か他のものをスローしますか。

また、キーを介してマップする場合は、オブジェクトキーを正しく参照するようにしてください。ちょうどこのような：

{ Object.keys(subjects).map((item, i) => (
   <li className="travelcompany-input" key={i}>
     <span className="input-label">key: {i} Name: {subjects[item]}</span>
    </li>
))}

オブジェクトのキーを参照するため、{subjects[item]}の代わりに{subjects[i]}を使用する必要があります。 subject [i]を探すと、未定義になります。

1
noa-dev