programing

Reactjs 맵은 기능하지만 각 맵은 기능하지 않습니다.

codeshow 2023. 4. 2. 11:42
반응형

Reactjs 맵은 기능하지만 각 맵은 기능하지 않습니다.

각각과 지도의 차이를 이해하려고 애쓰고 있어요다음 렌더링 기능에서는 'forEach'를 'map'으로 바꾸면 작동합니다.왜 'for each'와 함께 작동하지 않는지 이해할 수 없습니다.{item.id} 및 {item} 둘 다.text}은(는) 두 가지 메서드에 모두 있습니다.그렇다면 왜 'ForEach'를 사용할 때 'TodoItem'의 소품이 설정되지 않는 걸까요?

render() {    
  return(

     <ul>
        {this.props.items.forEach(function(item) {

           return (
              <TodoItem id={item.id} text={item.text} />)
        })} 
     </ul>
  );
}

'forEach'가 아무것도 반환하지 않는 경우 이 또한 작동하지 않습니다.

render() {    
  return(

     <ul>
        {this.props.items.forEach(function(item) {               

              <TodoItem id={item.id} text={item.text} />
        })} 
     </ul>
  );
}

map함수는 항목의 배열을 반환합니다.forEach그냥 루프를 돌리면 돼이 코드를 작동시키려면 다음을 사용합니다.

render() {    
  const items = [];
  this.props.items
    .forEach(item => items.push(
                       <li>
                          <TodoItem id={item.id} key={item.id} text={item.text} />
                       </li>
                     ))

  return(
     <ul>{items}</ul>
  );
}

다음 간단한 예를 사용하여 forEvery가 이 컨텍스트에서 작동하지 않는 이유를 알아보십시오.

[1,2,3].forEach((n)=> n); => returns undefined

[1,2,3].map((n)=> n); => returns [1,2,3]

@Nenad Vracar가 말했듯이map물건을 돌려줄 거예요.다른 어레이, 오브젝트 또는 코드를 사용하고 싶은 경우forEach하지만 DOM에 표시되는 것을 반환하고 싶기 때문에.사용하다map.

그리고 잊지 말고return지도에 뭐가 있든 간에이것은 일반적인 실수입니다.왜냐하면 반품할 필요가 없기 때문입니다.forEach.

기본적으로map다음 시간 동안 어레이를 반환합니다.forEach아무것도 반환하지 않습니다.

jsx/model 컨텍스트에서는 파서가 실제 및 가상 돔의 노드에서 변환하는 컴포넌트/노드/노드/노드/노드/노드/노드 목록을 반환해야 합니다.

각각 구문 분석할 필요가 없는 것과 같은 부작용으로 작업합니다.

Each()는 요소를 루프하기만 하면 됩니다.반환값을 버리고 항상 정의되지 않은 반환값을 반환합니다.이 메서드의 결과는 출력되지 않습니다.

요소를 통과하는 map() 루프는 메모리를 할당하고 메인 배열을 반복하여 반환값을 저장합니다.

var numbers = [2, 3, 5, 7];

var forEachNum = numbers.forEach(function(number) {
  return number
})
console.log(forEachNum)
//output undefined

var mapNum = numbers.map(function(number) {
  return number
})
console.log(mapNum)
//output [2,3,5,7]

//map() is faster than forEach()

언급URL : https://stackoverflow.com/questions/47442462/reactjs-map-works-but-foreach-doesnt

반응형