我只与React一起工作了两天,我一直无法显示JSON文件的提取结果。当我执行console.log时,数据会出现在控制台中,但是我一生都无法弄清楚如何通过渲染功能将其显示回来。
此外,我不知道如何传递或设置变量的值。在这种情况下,我收到警告-“为数据分配了一个值,但从未使用过”
我尝试了{JSON.stringify(this.Songs,null,2)}。 我试图调用this.data [0] .title以仅显示JSON中的第一个标题,但是我收到一个未定义0的错误。
就像this.data或this.song的值一样,歌曲丢失了。
我尝试使用let数据,const数据,this.data = this.data.bind等...
如何使值可用于render()? 以及如何将它们渲染到页面上?
这是代码,在此先感谢:
import React from 'react';
class Songs extends React.Component {
constructor(){
super();
const data = [];
}
componentDidMount() {
fetch('http://localhost:3000/data.json')
.then((response) => response.json())
.then((responseJson) => {
this.Songs = responseJson;
this.data = responseJson;
this.getData(this.Songs);
this.createColumns();
})
.catch((error) => {
console.error(error);
});
}
createColumns() {
this._columns = ['id', 'title', 'original_band', 'description', 'date_posted', 'download_midi_tabs', 'youtube_link', 'download_guitar_m4v' ];
console.log('inside createColumns: ' + this._columns);
}
getData(data){
console.log('inside getData');
console.log(data);
}
render() {
return (
<div>
{ JSON.stringify(this.data, null, 2) }
</div>
);
}
}
export default Songs;
以下是JSON中两行的示例:
[ { "id": "1", "title": "2 minutes 2 midnight", "original_band": "Iron Maiden", "description": "", "date_posted": "2012-02-06 17:14:56", "download_midi_tabs": "http://kronusproductions.com/songs_angular/assets/downloads/2_minutes_to_midnight.zip", "youtube_link": "http://youtu.be/VAm3-vyfJwI", "download_guitar_m4v": "http://kronusproductions.com/uploads/serious/2-minutes-to-midnight-vst.mp3", "download_enabled": "1" }, { "id": "2", "title": "909", "original_band": "The Beatles", "description": "Even though this song would be recorded at the end of the Beatles time together, it was one of the first songs that Lennon and McCartney wrote together. I have added horns in the place of the guitar licks that Lennon recorded.", "date_posted": "2012-02-06 17:14:56", "download_midi_tabs": "http://kronusproductions.com/songs_angular/assets/downloads/909.zip", "youtube_link": "https://youtu.be/DxuEYgbUtqE", "download_guitar_m4v": "http://kronusproductions.com/uploads/serious/909-vst.mp3", "download_enabled": "1" }
答案 0 :(得分:1)
您必须使用setState
来设置组件状态,该状态将驻留在组件的state
中。
示例
class Songs extends React.Component {
state = {
data: []
};
componentDidMount() {
fetch("http://localhost:3000/data.json")
.then(response => response.json())
.then(responseJson => {
this.setState({ data: responseJson });
})
.catch(error => {
console.error(error);
});
}
render() {
return (
<div>
{this.state.data.map(obj => {
return (
<div>
<h2>{obj.title}</h2>
<h3>{obj.original_band}</h3>
<p>{obj.description}</p>
</div>
);
})}
</div>
);
}
}
答案 1 :(得分:0)
您的代码有很多问题,但是我认为最大的问题是您从未对setState
进行过任何调用。更新state
或props
是React知道如何触发渲染的方式。