我正在尝试将实时数据库中的一组数据输出到html元素中,从服务器获取数据并使用setState保存数据没有问题。我有一个来自功能组件的自定义HTML对象,该对象将输出道具,但是我无法映射该对象和内部对象。
以下是负责从数据库中提取数据的代码:
componentDidMount() {
axios.get('./tasks.json')
.then(response => {
const fetchedTasks = [];
for (let key in response.data) {
fetchedTasks.push({
...response.data[key],
key: key
});
}
this.setState((prevState, props) => {
return {
taskList: fetchedTasks
}
} )
})
.catch(error => console.log(error));
}
这是我从数据库中提取的数据。我希望能够显示每个项目的名称,ID等。 这是从服务器导出JSON数据,这是通过axios.get调用“ Past.js”复制到类组件状态的
{
"tasks" : {
"09182018" : {
"-LMgzJGM78f0BHbPf8cc" : {
"hours" : 0,
"id" : "2018-09-18T14:02:25.022Z",
"minutes" : 0,
"name" : "sadflkjdsalkf",
"seconds" : 2,
"start" : "2018-09-18T14:02:22.508Z"
},
"-LMgzaEYe0tcCjpxOuPU" : {
"hours" : 0,
"id" : "2018-09-18T14:03:38.635Z",
"minutes" : 0,
"name" : "safd",
"seconds" : 2,
"start" : "2018-09-18T14:03:36.353Z"
}
},
"09192018" : {
"-LMm7EoPnNdQLrZ5Rg62" : {
"hours" : 0,
"id" : "2018-09-19T13:59:31.361Z",
"minutes" : 0,
"name" : "sadf",
"seconds" : 2,
"start" : "2018-09-19T13:59:29.281Z",
"user" : "placeholder"
}
},
"09212018" : {
"-LMve6ihcRX_uZfvBcaC" : {
"hours" : 0,
"id" : "2018-09-21T10:24:06.504Z",
"minutes" : 0,
"name" : "sadfsd",
"seconds" : 2,
"start" : "2018-09-21T10:24:03.841Z",
"user" : "placeholder"
},
"-LMvnBBAWaHaBiGW5VMK" : {
"hours" : 0,
"id" : "2018-09-21T11:03:44.420Z",
"minutes" : 0,
"name" : "hello",
"seconds" : 14,
"start" : "2018-09-21T11:03:29.802Z",
"user" : "placeholder"
}
}
}
}
我试图在没有运气的状态下运行.map()调用,映射嵌套项会抛出“ array.map不是函数”。这是我到目前为止的代码:
render() {
let outPutItems = [];
if (this.state.loading === false) {
outPutItems = this.state.taskList.map(array => array.map(item => {
<CompleteTask
id={item.id}
taskName={item.name}/>
})
)}
return (
<div className="Past">
<h1>Past Tasks</h1>
{outPutItems}
<button onClick={this.collectTasks}>Log the TaskList!</button>
</div>
);
}
-更新
最上面的三个是我可以在react中使用的,最下面的三个是使用伪数据,这是我希望从JSON数据中获得的输出,该数据已从firebase服务器应用于状态。
top output with map method, bottom using placeholder data from state
我可以输出此代码显示的前三名,上面的所有其他代码相同:
{this.state.taskList.map((outer, index) => (
<CompleteTask
taskName={outer.key}
/>
) )
}
答案 0 :(得分:0)
这应该为您工作。取自here。此外,在呈现列表之前无需检查loading == false
是否为return (
<div className="Past">
<h1>Past Tasks</h1>
{this.state.taskList.map((item, index) => (
<CompleteTask id={item.id} taskName={item.name}/>
)}
<button onClick={this.collectTasks}>Log the TaskList!</button>
</div>
);
。如果列表中没有要渲染的内容,则不会渲染任何内容。此外,列表一旦填充,它就会反映在视图中。
soup.find('span', attrs={'style': "font-family: b'Times-Bold'; font-size:13px"}).text