直接在return（）中使用Flickr中的JSON或使用.slice复制它？ 反应初学者

问题描述

我正在从自我学习中学习React，需要以下帮助来完成任务。 请为我的拙劣代码道歉，仍在学习。

这样做的主要重点是尝试使用this.setState将我从JSON文件收集的内容推送到我的状态，如下所示。

（请注意，列表状态是对我是否正确使用this.setState的测试）（评论是我尝试过的事情，但发现它们没有给我我想要的结果）

从'react'导入React，{组件};

导出默认类App扩展了Component {构造函数（props）{super（props）; this.state = {项目：[]，标题：[]，列表：[1、2、3]，} //this.getFlickrApi = this.getFlickrApi.bind（this）; }

我目前正在尝试创建一个显示来自Flickr的图片的简单应用。 当前使用的API URL： :

我用下面的代码连接到此

 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>
);

}

}

尽管我可以对其进行控制，但它不会显示在列表标记中。

任何帮助表示赞赏。

亲切的问候，

山姆