Используя JSON из Flickr непосредственно в return () или скопируйте его с помощью .slice?Реагировать новичка - PullRequest
Новая
       0

Используя JSON из Flickr непосредственно в return () или скопируйте его с помощью .slice?Реагировать новичка

0 голосов
/ 13 февраля 2019

Я учусь Реагируйте на самообучении и мне нужна помощь ниже для выполнения задачи.Пожалуйста, извинитесь за мой плохой код, который все еще учится.

Основное внимание уделяется попытке использования this.setState для перевода содержимого, которое я собрал из файла JSON, в мое состояние, как показано ниже.

(обратите внимание, что состояние списка было проверкой, чтобы увидеть, правильно ли я использовал this.setState) (комментарии - это вещи, которые я пробовал, но обнаружил, что они не дали мне результат, который я искал)

import React, {Component} из'act ';

класс экспорта по умолчанию App extends Component {constructor (props) {super (props);this.state = {items: [], title: [], list: [1, 2, 3],} //this.getFlickrApi = this.getFlickrApi.bind (this);}

В настоящее время я пытаюсь создать простое приложение, которое отображает картинки из Flickr.В настоящее время используется URL-адрес API: https://api.flickr.com/services/feeds/photos_public.gne?format=json&&nojsoncallback=1

Я подключаюсь к этому с кодом ниже 

 componentDidMount() { var request = new XMLHttpRequest();

   request.open('GET', 
  'https://api.flickr.com/services/feeds/photos_public.gne? 
   format=json&&nojsoncallback=1', true);
  var dataOutput = request.onload = function() {

    if (request.status >= 200 && request.status < 400) {
    console.log('Before JSON.parse');
    var data = JSON.parse(request.response);
    console.log(data);
    //this.setState({ items: data.items })

    console.log('After JSON.parse');

} else {
    console.log('error');
}
dataOutput = data;

console.log(dataOutput.items[1].title)
//dataOutput.items.forEach()
//this.setState({items: dataOutput.items});

}

request.send ();

}

И я пытаюсь использовать это для отображения «заголовков» каждого «элемента» в функции рендеринга.

render () {

// Use below for a function
// data.items.forEach(item => {

//     console.log(item.title)


//     //this.setState({titles: data.items.titles})
//     //console.log(this.state.titles)
// });
//console.log(this.state);
//console.log(getFlickrApi());
// {this.getFlickrApi()}

return (
  <div className="FlickrApiContainer">


    ))}
  {this.state.items.map(item => (<li key={item}>{item.title}</li>))}
  {this.renderItems()}


  </div>
);

}

}

Но он не отображается в тегах списка, несмотря на то, что я могу его утешить.

Любая помощь приветствуется.

С уважением

1037 * Сэм

1 Ответ

0 голосов
/ 13 февраля 2019

Я не использовал функцию стрелки в request.onload.Как только я это сделал и изменил его с

var dataOutput = request.onload = function () {

на

var dataOutput = request.onload = () =>{

он начал заполнять элементы списка заголовками каждого элемента.

...