ReactJS에서 객체를 매핑하려면 어떻게 해야 합니까?

ReactJS에서 객체를 매핑하려면 어떻게 해야 합니까?

저는 다음과 같은 답변을 드립니다.

다음 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>
))}

전화할 때Object.keys개체의 키 배열을 반환합니다.

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

전화할 때Array#map전달한 함수는 2개의 인수를 제공합니다.

1. 배열 내의 항목,
2. 항목의 인덱스입니다.

데이터를 얻고 싶을 때는item(또는 다음 예에서는)keyName대신 )를 사용합니다.i

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

이 오류가 발생하는 이유는 변수가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>
    ))
}  

사용하다Object.entries()기능.

Object.entries(object)반품:

[
    [key, value],
    [key, value],
    ...
]

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries 를 참조해 주세요.

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

다음을 사용하여 개체의 키 위에 매핑Object.keys():

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

아래를 사용하고 있습니다.Object.entries키와 값을 쉽게 출력할 수 있습니다.

{Object.entries(someObject).map(([key, val], i) => (
    <p key={i}>
        {key}: {val}
    </p>
))}

오브젝트 키를 사용하여 매핑하려고 할 때 오류가 발생하거나 다른 것을 던지거나 하지 않습니까?

또한 키를 통해 매핑하려면 개체 키를 올바르게 참조해야 합니다.바로 다음과 같습니다.

{ 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]}왜냐하면 그것은 객체의 키를 의미하기 때문입니다.주어[i]를 찾다 보면 정의되지 않는다.

왜 Aleksey Potapov가 삭제에 대한 답을 표시했는지 모르겠지만, 그것은 나의 문제를 해결했다.Object.keys(subjects.map)를 사용하면 각 객체의 이름을 포함하는 문자열 배열을 얻을 수 있고 Object.entries(subjects.map)에서는 모든 데이터가 watch 내에 있는 배열을 얻을 수 있었습니다.

const dataInfected = Object.entries(dataDay).map((day, i) => {
    console.log(day[1].confirmed);
});

게시물 주인이나 지나가는 다른 사람에게 도움이 되었으면 좋겠어요.

또한 Lodash를 사용하여 개체를 어레이로 직접 변환할 수 있습니다.

_.toArray({0:{a:4},1:{a:6},2:{a:5}})
[{a:4},{a:6},{a:5}]

고객님의 경우:

_.toArray(subjects).map((subject, i) => (
    <li className="travelcompany-input" key={i}>
        <span className="input-label">Name: {subject[name]}</span>
    </li>
))}

언급URL : https://stackoverflow.com/questions/40803828/how-can-i-map-through-an-object-in-reactjs