Как в цикле map можно выполнить функцию?

204

05 июля 2017, 00:35

Нужно сделать перебор в цикле используя 'map' и при этом вернуть результат выполнения 'map' используя при этом условие 'if'. Но уменя при попытке выполнить функцию ошибка.

Пример как я пытался сделать:

let mass = [ 
  1, 2, 3, 4, 5 
]; 
 
getValue(){ 
  return  mass.map((el) => ( 
      if(el <= 3){ 
        <div>el</div> 
      }else{ 
        console.log(el, 'thi el') 
      } 
   )) 
}

Как можно решить данную проблему ?

Answer 1

Поддерживаю ответ @Sapphiron по поводу использования filter. Но если задача именно в map, то:

class Test extends React.Component { 
	constructor(){ 
		super(); 
		this.state = { 
			mass: [1,2,3,4,5] 
		} 
	} 
	render() { 
		const getValue = this._getValue(); 
		return ( 
		 <div>{getValue}</div> 
		) 
	} 
	_getValue() { 
		return this.state.mass.map(el => { 
			if(el <= 3){ 
				return ( 
					<div>el</div> 
				) 
			} else { 
				console.log(el, 'the el') 
			} 
		}) 
	} 
	 
} 
ReactDOM.render(<Test />, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
<div id="root"></div>

Answer 2

Неправильный синтаксис map. Если внутри необходимы вычисления более 1 строки, их необходимо помещать в фигурные скобки и указывать return.

array.map(el => { return (<div>el</div>) })
Если нужно исключить какие-то значения, необходимо использовать filter, а не map. Метод map возвращает массив того же размера, как и перебираемый, а если на какой-то итерации отсутствовал return, то вставит undefined.

Правильный вариант:

const arr = [1, 2, 3, 4, 5, 6]; 
const arrElements = arr.filter((el, index) => { 
  if(index < 3) { 
    return <div>{el}</div> 
  } 
})

Update.

А если необходим просто срез массива, то лучше использовать slice, дабы не пробегать по всему массиву ради нескольких первых элементов.

const arr = [1, 2, 3, 4, 5, 6]; 
const newArray = arr.slice(0, 3); 
const arrElements = newArray.map(el => <div>{el}</div>);

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Смена блока на странице по ссылке

Здравствуйте, у меня на лэндинге есть код

410

javascript

Тождественны ли конструкции?

Тождественна ли конструкция:

224

javascript

setState at MouseWheel

Собственно запускаю setState при прокрутки мышью, начинает все тормозить, может даже "зависнуть" хром

197

javascript

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory

В Gulp пытаюсь сделать build gulp а мне выдает вот такую ерунду:

320