Почему не работает arr.map?

Question

[sinevik]

Написал в реакте вот такой код
Первый консоль лог выдает нормальное значение. То есть данные с API пришли и все нормально
Почему когда я пробегаюсь по этому массиву, оно значение etag пишет 2 консоль лог пишет undefined

Comments

[Mcrx]

вопрос, не по теме а для себя, изучаю js не так давно, что значит эта запись
let arr = this.state.NotesArr.concat([]);
я как понимаю это копирование массива? а зачем эти [] внутри функции concat?

Answer 1

[Алексей Уколов]

Потому что вызов setState - асинхронный и ваш объект state получает новые значения не сразу. Либо передавайте в setState колбэк и в нём делайте нужные операции, либо просто работайте с теми данные, которые записали в state напрямую (arr.map(...)).

P.S. Выкладывайте в будущем код текстом.

P.P.S.

Первый консоль лог выдает нормальное значение.

console.log работает со ссылками на объекты, поэтому когда вы массив разворачиваете, то видите не то, что там было на момент вызова, а то, что в нём лежит сейчас. Поэтому и кажется, что первый вызов отработал нормально.

Comments

[sinevik]

А может сделать promisom?
Ну то есть сделать проверку

youtubeapisearch(e) {
		ytSearch({term: e.target.value, key: "AIzaSyAb797EvvXHClky_KCTglFjXpbNZiV7MQU"}, (result) => {
			let arr = this.state.NotesArr.concat([]);
			arr.push(result),
			this.setState({NotesArr: arr});
			
			
		})
	}
	render() {
		var myPromise = new Promise(function(resolve, reject){
			var text ="Данных нет";
			if(this.state.NotesArr.length === 0){
				resolve(text);
			}
			else {
				reject(this.state.NotesArr);
			}
		});
		myPromise.then(function(text){
			console.log(text);
		}, function(data){
			let lis = data.map(function(item, index){
				return(item.etag);
			})
		})
		console.log(lis);

[Ди Ма]

sinevik, Возможно я ошибаюсь..
Вы должны вызвать функцию resolve после некоторых асинхронных действий. А у вас проверка length === 0 происходит в момент создания промиса, что никак не связано с вызовом setState

[sinevik]

Ди Ма, Последний маленький вопрос

youtubeapisearch(e) {
		ytSearch({term: e.target.value, key: "AIzaSyAb797EvvXHClky_KCTglFjXpbNZiV7MQU"}, (result) => {
			let arr = this.state.NotesArr.concat([]);
			setTimeout( function(){
			arr.push(result),
			this.setState({NotesArr: arr});
			}, 1000)
			console.log(this.state.NotesArr);
			
		})
	}

Я так понимаю тут this.setstaet не понимает что это метод из объекта. Как решить эту проблему? я пробовал bind написать но это не работает

[Ди Ма]

sinevik,
Делать это через таймаут - не самая лучшая идея.
А про "не понимает что это метод из объекта" - используйте:

// стрелочную функцию
setTimeout(() => {
  // тут this тот-же, что и снаружи
}, 1000)

// забиндить можно так
setTimeout((function(){
	// ...
}).bind(this), 1000)

// или через замыкание
var self = this;
setTimeout(function(){
	self.setState({NotesArr: arr});
}, 1000)