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
'programing' 카테고리의 다른 글
React에서 참조에 대한 올바른 예방 유형은 무엇입니까? (0) | 2023.04.02 |
---|---|
다른 컴포넌트에서 컴포넌트 상태에 액세스하는 방법 (0) | 2023.04.02 |
모든 이미지를 php 폴더에서 가져옵니다. (0) | 2023.04.02 |
Wordpress AJAX 로그인 (0) | 2023.04.02 |
Woocommerce - 카트 페이지가 표시되지 않음 (0) | 2023.04.02 |